Day4.8使用children属性实现路由嵌套

 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>