嵌套路由是通过children配置实现父子路由层级结构，父组件需含routerview作为子组件渲染插槽，支持多级嵌套、默认重定向及懒加载。
嵌套路由就是让一个页面（父路由）内部还能再划分多个子页面（子路由），URL路径呈现层级关系，比如 /admin/users 和 /admin/settings 共享同一个管理框架，但各自渲染不同内容。关键不在于“多级跳转”，而在于“结构复用”和“视图嵌套”。
嵌套路由的核心逻辑：父子组件+嵌套容器
它依赖两个基础配合：
- 路由配置里用 children 数组声明子路由，子路径默认相对于父路径（如父 path 是
/admin，子path: 'users'就对应完整 URL/admin/users） - 父组件模板中必须有
（Vue 3）或 （Vue 2），作为子组件的“插槽”——没有它，子路由组件就无处渲染
用 children 构建后台管理页的典型结构
以常见后台为例，一级导航是 /admin，二级是功能模块，三级可能是详情页。children 可以多层嵌套：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 第一层 children：定义 /admin 下的主功能入口（如 users、settings、logs）
- 第二层 children：在某个模块内继续细分，比如 /admin/users 下再分列表页（
path: ''）、新建页（path: 'create'）、详情页（path: ':id'） - 注意：子路由的
path: ''表示匹配父路径本身，常用来设默认子页面（如访问 /admin 自动显示仪表盘）
实战中容易忽略的关键细节
不是加了 children 就能跑通，这几个点决定是否真正可用：
-
父组件必须有
：哪怕只是空壳布局页（比如含侧边栏+顶部栏的 AdminLayout.vue），也得留出 位置，否则子页面白屏 -
子路由命名要独立清晰：不要全用 name: 'admin'，建议按层级命名，如
name: 'admin-users'、name: 'admin-users-detail'，方便编程式导航和权限控制 -
重定向别写错路径：如果父路由 /admin 本身不渲染内容，只做容器，需配
{ path: '', redirect: 'dashboard' }，这里的'dashboard'是子路径，不是完整 URL -
懒加载可逐层拆分：子路由组件同样支持
() => import(...)，避免把所有模块打包进首页 JS
一个精简但完整的 Vue 3 后台路由片段
参考实际项目常用写法：
const routes = [
{
path: '/admin',
component: () => import('@/layouts/AdminLayout.vue'), // 带侧边栏和头部的壳
children: [
{ path: '', redirect: 'dashboard' },
{ path: 'dashboard', name: 'admin-dashboard', component: () => import('@/pages/Dashboard.vue') },
{
path: 'users',
name: 'admin-users',
component: () => import('@/pages/Users/Index.vue'),
children: [
{ path: '', name: 'admin-users-list', component: () => import('@/pages/Users/List.vue') },
{ path: 'create', name: 'admin-users-create', component: () => import('@/pages/Users/Create.vue') },
{ path: ':id', name: 'admin-users-detail', component: () => import('@/pages/Users/Detail.vue') }
]
}
]
}
]
这样组织后，/admin/users/123 就会自动在 AdminLayout 内部渲染 Users/Detail.vue，共享导航和权限逻辑，无需重复写布局代码。
