1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../lib/js/vue.js"></script> 7 <script src="../lib/js/vue-router.js"></script> 8 </head> 9 <body> 10 11 <div id="app"> 12 <router-link to="/account">Account</router-link> 13 <router-view></router-view> 14 </div> 15 16 <template id="tem"> 17 <div> 18 <h1>这是account组件</h1> 19 <router-link to="/account/login">登录</router-link> 20 <router-link to="/account/register">注册</router-link> 21 <router-view></router-view> 22 </div> 23 </template> 24 25 <script> 26 // 组件模板对象 27 const account = { 28 template:'#tem' 29 }; 30 const login = { 31 template: '<h3>登录</h3>' 32 }; 33 const register = { 34 template: '<h3>注册</h3>' 35 }; 36 37 // 路由构造函数 38 const routerObj = new VueRouter({ 39 routes:[ 40 { path:'/account', 41 component:account, 42 // children 实现路由嵌套（子路由），path 前面不要带 / ，否则永远以根路径开始请求 43 children:[ 44 { path:'login',component: login }, 45 { path:'register',component:register } 46 ] 47 } 48 // { path:'/account/login',component:login }, 49 // { path:'/account/register',component:register } 50 ] 51 }); 52 53 const vm = new Vue({ 54 el:'#app', 55 data:{}, 56 methods:{}, 57 router:routerObj 58 }) 59 </script> 60 </body> 61 </html>