前言

想象一下，这里有一个组件，组件顶部是三个按钮，主体是展示区域，通过按钮可以切换展示区域不同的组件（也可以是同一组件，这取决于你）并展示不同的内容。大组件嵌套小组件，并且大组件也是通过 <router-view>渲染的。那这种组件嵌套组件的形式，是如何实现的呢？

嵌套路由

如果你有一定经验。想必已经有答案了。但还是有必要说一说。

回顾一下我们在起步时，<router-view>所放置的位置，是在App.vue文件里。因为App.vue是项目根组件，其<router-view>属于第一级别，那有没有第二、第三级别的<router-view>呢？答案是有的。

先来明确一个概念，<router-view>与路由表中的路径是对应的，一般还是一一对应的。

// 路由表
const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

正如上面代码显示的，Home组件对应路径/home。如果存在第二级<router-view>，那是不是也存在与他匹配的路由路径？

Vue 的设计就是如此显而易见且符合逻辑。路由的级别与它自身的嵌套层级一一对应：

// 路由表
const routes = [
 {
   path: '/home',
   name: 'Home',
   component: Home,
   children: [
     {
       path: '/about',
       name: 'About',
       component: About
     },
     {
       path: '/detail',
       name: 'Detail',
       component: Detail
     }
 },
]

我们将上面的路由表稍微做了一下改变，在/home路径下新增一个children的路由列表，并将/about放在了children里，这意味着/about路由成为了/home的子路由，当我们在Home组件内部任意位置使用一个<router-view>时，这个<router-view>会自动去匹配与它对应的二级路由。

我们继续在/about下新增一个/detail路由。在/home内部使用两个<router-link>标签：

<router-link to="/about"  />
<router-link to="/detail"  />

当点击这两个标签时，其会自动切换到对应路由所对应的组件，About组件与Detail组件相继被渲染和切换。这两个组件是嵌套在Home组件内部的子组件。

当然，这种嵌套是允许更深层次的嵌套的，但若不是项目需要，请不要这么做，这样会让路由表层级太深，不利于维护。

我的嵌套路由案例