Vue-Router（三）：嵌套路由

Posted 2023-04-27

参考技术A 简单地说，就是路由的套娃，一层一层往下套，理论上是没有上限的，只是一般都不会嵌套太多层。

使用嵌套路由的地方一般是用户中心、管理后台等。一级路由进入左面的功能菜单，右面是二级路由的空间。

┌──────────────┐
│　用户中心　　　　　│
├───────┬──────┤
│　功能菜单│二级路由 │
│　模块一　│　区域　 │
│　模块二　│　　　　 │
│　　　　　│　　　　 │
│　　　　　│　　　　 │
│　　　　　│　　　　 │
└───────┴──────┘

大概就是这个意思。

跳转的设置没什么特别的，都可以用。
只是这里有一个默认二级路由，一般跳到一级路由的时候只会指定一级的名称，比如 这里的crud2，但是这时候二级路由是不会打开的，因为没有指定二级路由。

这时候可以通过一个默认二级路由来设置，避免空白的现象。
比如这里的 path: '', component: UserHome 我们可以在这里设置一个默认打开的二级路由的组件。

Vue-router 子路由（嵌套路由）

https://my.oschina.net/sdlvzg/blog/1798162

https://blog.csdn.net/weixin_30340353/article/details/99235730