第七章路由 77 路由-使用children属性实现路由嵌套

 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>

原文地址：https://www.cnblogs.com/songsongblue/p/11008763.html

第七章 路由 77 路由-使用children属性实现路由嵌套

第七章路由 77 路由-使用children属性实现路由嵌套