嵌套路由

一、嵌套路由的配置

1、children 属性

Vue Router 中的每一个路由对象身上都有一个 children 属性用来设置嵌套路由：

 const routes = [
     {
         path: '/home',
         name: 'Home',
         component: HomeView,
         children: [
         ]
     }
 ]

children 是一个数组，数组中用来设置所有的嵌套子路由对象。

2、配置子路由

例如我们再创建两个子组件：

• /src/views/students/StudentsList.vue
• /src/views/students/StudentsAdd.vue

然后在 Home 路由中配置这两个组件对应的子路由：

 const routes = [
     {
         path: '/home',
         name: 'Home',
         component: Home,
         children: [
             {
                 path: 'studentsList',
                 name: 'StudentsList',
                 component: StudentsList
             },
             {
                 path: 'studentsAdd',
                 name: 'StudentsAdd',
                 component: StudentsAdd
             }
         ]
     }
 ]

注意：嵌套子路由的路径前不能添加 /，所有以 / 开头的嵌套路径会被当作根路径。

二、嵌套路由出口

路由配置成功后，想要在页面上成功的显示对应组件，还需要继续设置路由出口 <router-view />。
一开始为了在 App.vue 中显示 HomeView.vue，我们在 App.vue 中添加了一个 <router-view />。现在我们希望在 HomeView.vue 中可以显示 StudentsList.vue 或 StudentsAdd.vue，因此还需要在 HomeView.vue 中添加一个 <router-view /> 来渲染 Home 中的子组件。

 <template>
     <div>  
         <aside>侧边栏菜单</aside>
         <main>
             <header>首页</header>
             <section>
                 <router-view></router-view>
             </section>
         </main>
     </div>
 </template>

三、嵌套路由的跳转

嵌套路由的跳转和普通路由的跳转没有区别，<router-link> 和 this.$router 都可以使用：

<router-link to="/home/studentsList"></router-link>

 this.$router.push("/home/studentsList");

但是需要注意的是，不管是什么路由，在任何组件中跳转时都需要写完整路径。

四、默认子路由

当我们给 /home 设置了子路由后，访问每一个子路由时，都会在页面对应位置显示对应的组件。
但是，如果我们只访问父级路由 /home 时，页面中子组件的位置就会是一片空白，所以，我们需要再给父级路由设置一个默认子路由：

const routes = [
     {
         path: '/home',
         component: HomeView,
         children: [
             // 默认子路由
             {
                 path: '',
                 name: 'Home',
                 component: ChartsView
             }
             // 其他子路由
         ]
     }
 ]

这样配置完成后，我们再访问 /home 时，就能看到 ChartsView.vue 这个页面了。
注意：

1. 默认子路由的 path 为空字符串，用来匹配 /home 路径；
2. 当设置了默认子路由时，父路由的 name 属性应该设置在默认子路由中；