前言

《vue 基础》系列是再次回炉 vue 记的笔记，除了官网那部分知识点外，还会加入自己的一些理解。（里面会有部分和官网相同的文案，有经验的同学择感兴趣的阅读）

对于简单的路由体系我们代码会是这样：

路由定义会是这样：

这些都是一级路由。对于稍稍复杂的页面布局可能需要更多层级，那怎么实现路由的嵌套呢？

父子路由

在路由中使用 children 属性，它是一个数组类型的属性，你可以在这个数组中定义一堆子 router。

这个例子出现了两个 children ，也就是一个普通的 三级路由 形式。

上面只是一个例子说明路由嵌套问题。我不建议你把页面搞得太复杂，毕竟把用户搞得晕头转向这不是一个好的产品设计。

路由多组件

这不属于路由嵌套，但个人认为有必要说下，因为可能你和我一样没注意到能这样玩。

有时候会出现一个页面中需要出现 sidebar（侧导航栏） 和 main（主内容）两个 view 模块。

下面是一个类似的布局示例：

布局实例

放到 vue-router 来实现，就是存在两个 router-view。原先你可能一直用 component 这个属性，但现在适应这个布局需要：可以把原先的 component 定义成复数 components 。

通过 命名视图 来完成这样的功能。

如上图的“同级路由 tab”，我们一个路由地址下的大组件，其包括了 3个组件（并都用黄色框子标注出来）

注意：为了能使得多组件生效，你需要对每个 router-view 单独命名一个 name ，为当前视图做个命名。如，left、right。

总结

简单举例了路由嵌套、同路由多组件的复合路由的代码示例，如果你对这块有小疑惑，希望能帮助到你。

关于我

一位“前端工程师”，乐于实践，并分享前端开发经验。

如果有问题或者想法，欢迎各位评论留言，愿大家共同进步。

关注【前端雨爸】，查阅更多前端技术心得。