在单页应用里，“页面”不再是整屏刷新，而是由路由驱动的组件树。当业务复杂到「用户中心 → 个人资料 / 收货地址 / 账号安全 / 好友列表」这种层级时，嵌套路由（Nested Routes）是唯一能把深度与可维护性同时保留下来的方案。

一、嵌套路由到底在解决什么问题

想象一个用户中心：

如果写成平级路由，每切换一个子页面就要重新加载整个外壳（导航、侧边栏、用户信息），浪费、卡顿、状态丢失。

嵌套路由让外壳只挂载一次，子页面作为 <router-view> 的局部插槽渲染，完美复用外壳，并天然支持面包屑、标签页、权限控制。

二、一条代码看全貌

要点：

• 层级关系 = 文件系统：父路由的 component 是文件夹，children 是里面的文件。
• 默认子路由 = 空字符串 ''，访问 /user 时自动渲染 Profile。
• 路径写法 = 相对路径：address 会自动拼接成 /user/address，无需手写全量。

三、Layout 组件

子页面渲染时，Layout 组件不会重新创建，导航高亮、用户信息、WebSocket 连接全部保持。

四、动态路由 + 嵌套：URL 即状态

把用户 ID 塞进路径：

访问 /user/42/address 时：

• Layout 通过 props.id 拿到 42，去拉用户信息；
• Address 通过 props.id 再去拉地址列表；
• 切换子路由只改后半段，外壳复用，接口只增不重复。

五、项目实践

1.权限与面包屑

全局后置钩子：

matched 数组从根到当前节点依次展开，天然就是面包屑数据源。

权限同理：在导航守卫里检查 to.matched.some(r => r.meta.needAuth)，一次递归即可拿到所有层级要求。

2.代码分割

• 父路由同步加载：外壳体积小，保证首屏骨架秒出；
• 子路由全部懒加载：利用魔法注释给 chunk 命名，方便 CDN 缓存。

六、常见问题

• 空路径与斜杠：path: '' 与 path: '/' 都匹配 /user，但后者会额外触发重定向，导致外壳重复渲染。
• 深度监听失效：在 Layout 里 watch $route 时，记得加 immediate: true，否则首次进入不触发。
• 滚动位置丢失：给 <router-view> 加 key="$route.fullPath" 可强制重新挂载，但会破坏缓存；更优解是在 activated 钩子里手动恢复 scrollTop。