Vue Router 多层嵌套需路由配置与组件结构双向对齐：父路由须声明 children、父组件模板须含 <router-view>、子路由 path 为相对路径；三者缺一不可，否则子组件不渲染。
Vue Router 的多层嵌套本质是“路由配置”与“组件结构”的双向对齐，不是堆砌 <router-view> 就能生效，关键在路径拼接、children 声明和父子组件中 <router-view> 的位置是否匹配。
父路由必须显式包含 <router-view>
子路由组件不会自动渲染——只有在父组件模板里写了 <router-view>，它才具备“承接”子组件的能力。比如用户页 User.vue 要展示 profile 或 posts，就必须这样写：
<template><div class="user"><h2>User {{ $route.params.id }}</h2><router-view></router-view></div></template>- 如果漏掉这行，哪怕路由配了
children，子组件也完全不会出现
children 中的 path 是相对路径
子路由的 path 不加斜杠（/），否则会被当作根路径处理：
- ✅ 正确：
{ path: 'profile', component: UserProfile }→ 完整 URL 是/user/123/profile - ❌ 错误：
{ path: '/profile', component: UserProfile }→ 匹配的是/profile，和父级无关 - 空路径可用来设置默认子页面：
{ path: '', component: UserHome }，访问/user/123时就显示它
可以无限嵌套，但需逐层对应
三层嵌套常见于后台系统：Layout → Module → Page。每多一层，就要满足三个条件：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 上层路由对象中定义
children: [ ... ] - 上层组件模板中存在
<router-view> - 下层路由的
path是相对路径，且不重复上级已声明的部分
例如：/system/user/profile/edit 对应：
-
path: '/system'→ Layout 组件，含<router-view> -
path: 'user'（children）→ UserModule 组件，也含<router-view> -
path: 'profile/edit'（再 children）→ ProfileEdit 组件，最终渲染到最内层<router-view>
避免常见错位问题
嵌套失败多数不是语法错误，而是结构错位：
- 父路由配了
children，但父组件没写<router-view>→ 子内容空白 - 子路由
path写成绝对路径（带/）→ 路由跳转正常，但渲染到顶层<router-view>，破坏布局 - 子组件里没留
<router-view>却又配了孙子路由 → 后续层级直接失效 - 用
redirect时未注意嵌套上下文，比如从/user重定向到/user/profile，需确保/user对应的组件有<router-view>
