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 <script src="../lib/vue-router-3.0.6.js"></script> 12 </head> 13 14 <body> 15 <div id="app"> 16 <router-link to="/account">Account</router-link> 17 <router-view></router-view> 18 19 </div> 20 21 <template id="tmp1"> 22 <div> 23 <h1>这是 Account 组件</h1> 24 25 <router-link to="/account/login">登录</router-link> 26 <router-link to="/account/register">注册</router-link> 27 28 <router-view></router-view> 29 30 </div> 31 </template> 32 33 34 35 36 <script> 37 38 //组件的模板对象 39 var account={ 40 template:'#tmp1' 41 } 42 43 var login={ 44 template:'<h3>登录</h3>' 45 } 46 47 var register={ 48 template:'<h3>注册</h3>' 49 } 50 51 52 var router=new VueRouter({ 53 routes:[ 54 { 55 path:'/account', 56 component:account, 57 //使用children 属性，实现子路由，同时，子路由的 path 前面，不要带 /，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址 58 children:[ 59 {path:'login',component:login}, 60 {path:'register',component:register} 61 ] 62 }, 63 // {path:'/account/login',component:login}, 64 // {path:'/account/register',component:register} 65 ] 66 }) 67 68 69 //创建 Vue 实例，得到 ViewModel 70 var vm = new Vue({ 71 el:'#app', 72 data:{ 73 msg:'' 74 }, 75 methods:{}, 76 router 77 }); 78 </script> 79 </body> 80 </html>