children属性实现子路由 

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="./node_modules/vue/dist/vue.js"></script>
 7     <script src="./node_modules/vue-router/dist/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 <template id="tmp1">
16     <div>
17         <router-link to ="/account/login">login</router-link>
18         <router-link to ="/account/regis">regis</router-link>
19         <router-view></router-view>
20     </div>
21 </template>
22 
23 </body>
24 <script>
25     var account = {
26         template:'#tmp1'
27     }
28     var index = {
29         template:'<h1>index</h1>'
30     }
31 
32     var regis = {
33         template:'<h1>regis</h1>'
34     }
35 
36     var login = {
37         template:'<h1>login</h1>'
38     }
39     var router = new VueRouter({
40         routes: [
41             {
42                 path: '/account',
43                 component: account,
44                 // 使用children属性实现子路由,同时path前面不要带/
45                   children:[
46                       {path:'login',component: login},
47                       {path:'regis',component: regis}
48                   ]
49             },
50             {path:'/',component:index}
51         ]
52     });
53     new Vue({
54         el:"#app",
55         data:{},
56         methods:{},
57         router:router
58     })
59 </script>
60 </html>

 

posted @ 2019-09-17 19:01  normalboy(NB)  阅读(307)  评论(0)    收藏  举报