Vue学习笔记【28】——Vue路由（使用 children 属性实现路由嵌套）

使用 children 属性实现路由嵌套

   <div id="app">
     <router-link to="/account">Account</router-link>
 ​
     <router-view></router-view>
   </div>
 ​
   <script>
     // 父路由中的组件
     const account = Vue.extend({
       template: `<div>
         这是account组件
         <router-link to="/account/login">login</router-link> | 
         <router-link to="/account/register">register</router-link>
         <router-view></router-view>
       </div>`
     });
 ​
     // 子路由中的 login 组件
     const login = Vue.extend({
       template: '<div>登录组件</div>'
     });
 ​
     // 子路由中的 register 组件
     const register = Vue.extend({
       template: '<div>注册组件</div>'
     });
 ​
     // 路由实例
     var router = new VueRouter({
       routes: [
         { path: '/', redirect: '/account/login' }, // 使用 redirect 实现路由重定向
         {
           path: '/account',
           component: account,
           children: [ // 通过 children 数组属性，来实现路由的嵌套
             { path: 'login', component: login }, // 注意，子路由的开头位置，不要加 / 路径符
             { path: 'register', component: register }
           ]
         }
       ]
     });
 ​
     // 创建 Vue 实例，得到 ViewModel
     var vm = new Vue({
       el: '#app',
       data: {},
       methods: {},
       components: {
         account
       },
       router: router
     });
   </script>
 ​