1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <!--1.導入Vue的包--> 10 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 11 <!-- 安裝 vue-router 路由模塊 --> 12 <script src="../lib/vue-router-3.0.6.js"></script> 13 </head> 14 15 <body> 16 <div id="app"> 17 <!-- <a href="#/login">登錄</a> 18 <a href="#/register">注冊</a> --> 19 20 <!-- router-link 默認渲染為一個a標簽 --> 21 <router-link to="/login" tag="span">登錄</router-link> 22 <router-link to="/register">注冊</router-link> 23 24 <!-- 這是 vue-router 提供的元素，專門用來 當作占位符的，將來，路由規則，匹配到的組件，就會展示到這個 router-view中去 --> 25 <!-- 所以：我們可以把router-view 認為是一個占位符 --> 26 <router-view></router-view> 27 </div> 28 29 <script> 30 //組件的模板對象 31 var login={ 32 template:'<h1>登錄組件</h1>' 33 } 34 35 var register={ 36 template:'<h1>注冊組件</h1>' 37 } 38 39 /*Vue.component('login',{ 40 template: '<h1>登錄組件</h1>' 41 })*/ 42 43 //2.創建一個路由對象，當導入vue-router 包治好，在window全局對象中，就有了一個路由的構造函數，叫做VueRouter 44 //在 new 路由對象的時候，可以為 構造函數，傳遞一個配合對象 45 var routerObj=new VueRouter({ 46 //route //這個配置對象中的route表示 【路由匹配規則】 的意思 47 routes:[//路由匹配規則 48 //每個路由規則，則都是一個對象，這個規則對象，身上，有兩個必須的屬性： 49 // 屬性1 是path, 表示監聽 哪個路由鏈接地址； 50 // 屬性2 是component,表示，如果 路由是前面匹配到的path，則展示component屬性對應的哪個組件 51 //注意：component 的屬性值，必須是一個組件的模板對象，不能是 組件的引用名稱； 52 // {path:'/',component:login}, 53 {path:'/',redirect:'/login'}, //這里的 redirect 和 Node 中的redirect完全是兩碼事 54 {path:'/login',component:login}, 55 {path:'/register',component:register} 56 ] 57 }) 58 59 //創建 Vue 實例，得到 ViewModel 60 var vm = new Vue({ 61 el:'#app', 62 data:{ 63 msg:'' 64 }, 65 methods:{}, 66 router:routerObj //將路由規則對象，注冊到 vm 實例上，用來監聽 URL 地址的變化，然后展示對應的組件 67 }); 68 </script> 69 </body> 70 </html>