前言
想象一下，这里有一个组件，组件顶部是三个按钮，主体是展示区域，通过按钮可以切换展示区域不同的组件（也可以是同一组件，这取决于你）并展示不同的内容。大组件嵌套小组件，并且大组件也是通过 <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组件内部的子组件。
当然，这种嵌套是允许更深层次的嵌套的，但若不是项目需要，请不要这么做，这样会让路由表层级太深，不利于维护。
