嵌套式导航架构需父子路由协同渲染，父组件必须显式声明<router-view>作为子组件唯一容器，子路由path相对父路径书写，空字符串表示默认子页，命名路由提升跳转稳定性，布局复用与权限收敛是核心价值。
嵌套式导航架构不是加几层 children 就完事，关键在于父子路由如何协同渲染、状态如何传递、布局如何复用。核心是让 URL 层级与组件结构严格对齐，同时避免重复挂载和视图丢失。
父组件必须提供 router-view 出口
子路由组件没有“自动落点”，必须由父组件显式声明 <router-view> 才能被渲染。这个标签就是子组件的唯一容器，缺了它，哪怕路由配置完全正确，页面也空白。
- 父组件模板里不能只写内容，一定要留出
<router-view>位置 - 如果父组件本身还带顶部导航或侧边栏，
<router-view>应放在内容区，而非整个组件最外层 - 多级嵌套时，每一级父组件都得有自己的
<router-view>，不能靠上一级代劳
子路由 path 必须相对书写
子路由的 path 是相对于父路由路径的，不加开头斜杠。比如父路径是 /user/:id，子路由写 profile，完整匹配地址就是 /user/123/profile；若误写成 /profile，就会变成根路径匹配，脱离嵌套上下文。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 空字符串
path: ''表示访问父路径时默认展示的子页，例如/user/123直接显示个人主页 - 子路由支持继续嵌套，如
profile → contact，对应路径为/user/123/profile/contact - 命名路由（
name）推荐配合使用，尤其在跳转带参数时更稳定，比如{ name: 'user-profile', params: { id: 123 } }
布局复用与权限收敛是嵌套路由的价值所在
真正发挥嵌套路由优势的地方，是把固定区域（如用户头像、导航菜单、操作栏）抽到父组件，所有子页共享，既减少重复代码，又便于统一控制权限和加载状态。
立即学习“前端免费学习笔记（深入）”；
- 登录态校验可放在父路由的
beforeEnter守卫中，子路由无需各自判断 - 父组件可通过
$route.params或useRoute()（Vue 3）直接读取动态段，供所有子组件复用 - 若需多个并行区域（如主内容 + 右侧设置面板），可用命名视图：
<router-view name="sidebar"></router-view>
常见失效原因快速排查
嵌套路由跑不起来，90% 都卡在这几个细节上，而不是逻辑本身复杂。
- 父组件没写
<router-view>—— 控制台无报错，但子组件完全不出现 - 子路由
path多写了/—— 浏览器地址变了，但渲染的还是父组件或404页 - main.ts 中未调用
app.use(router)—— 整个路由系统未激活，<RouterLink>和<router-view>都无效 - 子组件导出不是
default—— 控制台报 “Failed to resolve component”
