嵌套路由需在父级路由配置中添加children数组，父路由必须有component，子路径不加/，父组件模板需含<router-view>，空path可设默认页，children支持多层嵌套。
在父级组件对应的路由配置中添加 children 数组，就是配置嵌套路由的核心操作。它不是写在组件内部，而是写在 router/index.js（或类似路由配置文件）的路由对象里。
1. children 必须挂载在父路由对象下
只有当某个路由配置项包含 component（即有对应视图组件），才能在其下定义 children。子路由路径是相对父路径的，不加 / 开头：
- ✅ 正确写法：
{ path: '/user', component: User, children: [{ path: 'profile', component: Profile }] }→ 子路由完整路径为/user/profile - ❌ 错误写法：
{ path: '/user', children: [...] }→ 缺少component，该路由无法渲染，子路由也不会生效 - ❌ 错误写法：
{ path: '/user', children: [{ path: '/profile', ... }] }→/profile是绝对路径，会跳到根级，不嵌套
2. 父组件模板里必须有 <router-view>
children 配置只是“声明关系”，真正渲染子组件靠的是父组件模板中的 <router-view> —— 它是子路由内容的占位出口：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 父组件
User.vue模板中需包含：<router-view></router-view> - 没有这个标签，即使
children配置正确，子组件也完全不会显示 - 可配合样式、标题、导航等其他内容一起布局，
<router-view>就像一个“插槽”
3. 空路径子路由用于默认展示
当访问父路径本身（如 /user/123）时，若无匹配的子路由，<router-view> 会空白。此时可加一个空 path: '' 的子路由作为默认页：
立即学习“前端免费学习笔记（深入）”；
-
{ path: '', component: UserHome }→ 访问/user/123时自动渲染UserHome - 也可用
redirect跳转到某个子路径，例如redirect: 'profile'
4. children 可多层嵌套，结构即路由树
children 数组里的每个子路由，只要自己也有 component 和 children，就能继续嵌套：
- 例如：
/admin/system/user/list可对应四层嵌套：AdminLayout → SystemView → UserView → ListView - 每层都需在对应组件中放
<router-view>，形成逐级渲染链 - 路由配置上就是 children 套 children，逻辑清晰，层级分明
