前言

前面我们介绍routes路由属性时，有一个children属性，代表着路由下面的子路由，我们称之为嵌套路由，日常开发中我们必定会用到嵌套路由，本节我们就来学习一下。

嵌套路由

嵌套路由很有实际意义，因为组件是有嵌套关系的存在，路由与组件是对应的，如果我们做过后台管理项目，很多页面都是嵌套路由的写法，比如列表路由、编辑路由等，两者都存在关联。嵌套路由的语法很简单，就是在创建路由时将子路由放到children。children的ts接口依旧为RouteRecordRaw数组，这也就意味着嵌套可以无限下去。

视图

嵌套路由写法虽然很简单，但还是有好几个注意的点，下面我们就在home路由添加一个子路由渲染下视图。

我们添加了一个hello子路由，注意此时的path是没有添加路径/，加载路由的写法就是父路由后面拼接path名称，我们打开页面请求/home/hello。

还是home界面，这是为什么呢？原因很简单，home文件没有添加router-view，路由想要渲染出对应的视图，必须要用router-view，嵌套路由就需要在父路由添加。我们在home界面添加一个router-view，然后刷新页面。

子路由对应的组件就渲染出来了。嵌套路由的表现出来的就是嵌套组件，这也是我们一直强调的路由对于组件，总结一下：
嵌入路由——（router-view）——>嵌入组件

路径

上面例子中我们path写的就是名称，接下来我们把子路由的path加上/，然后再加载/home/hello页面是空白的，我们需要请求/hello。

以/开头路径就会当作根路径， 还有一个比较特殊的情况——空路径，也就是path设置为空。

如图所示，当嵌套路径为空时，会直接显示出来。根据上述特点，我们可以总结出一套写法：

1. 父路由component对应的vue文件，只写一个router-view。

 <template>
  <router-view></router-view>
</template>

我们就可以写一个公共的vue文件，添加以上代码，父路由的component指向该文件即可。
2. 嵌套路由第一个路由的path设置为空，此时就默认将对应的component展示。 3. 其他路由的path前面都加上/，写出根路径，并且声明name。
该写法就是单纯把父路由当成了组件出口，当然嵌套路由的写法没有标准，只要能满足需求，正确渲染出页面就可以。

总结

以上就是嵌套路由，虽然简单，但需要注意嵌套路由一定要在父路由中添加router-view，path路径不同的写法对应着不同做法，我们要根据自己的需要选择合适的写法。