嵌套路由需父组件模板含且路由配置用children定义子路由；子路径相对父路径，空字符串表示默认子页；支持多级嵌套、命名视图及状态复用。
在嵌套路由中使用子级路由视图，核心就两点：父组件模板里放
父组件必须包含
子路由组件不会自己找地方显示——它只会在父组件模板中明确声明的 <router-view></router-view> 位置出现。这个标签可以放在任意合法位置（比如侧边栏下方、主内容区、Tab 面板内部），但不能缺失。
- 如果父组件没写
<router-view></router-view>，哪怕路由配了children，子组件也完全不会渲染 - 支持多个
<router-view></router-view>，比如配合命名视图实现左右双栏布局 - 建议加 class 或 key 便于样式控制或强制刷新，例如：
<router-view class="main-content"></router-view>
子路由路径是相对的，不带前导斜杠
在 children 数组里写的 path 是相对于父路由路径的，不是完整 URL。写成 /profile 反而会变成根路径匹配，导致子路由失效。
- 父路由是
/user/:id，子路由应写path: 'profile'→ 完整路径为/user/123/profile - 空字符串
path: ''表示“父路径本身”，常用于设置默认子页面（如访问/user/123时显示用户主页） - 带参数的子路径也一样相对，例如
path: 'posts/:postId'→ 匹配/user/123/posts/456
子路由需通过 children 显式声明
children 是一个标准的路由配置数组，结构和顶层 routes 完全一致，支持嵌套多层、重定向、别名、元信息等全部能力。
- 每条子路由必须有
path和component（或components） - 可继续定义下一级
children，实现三级甚至更深的嵌套 - 推荐给每个子路由加
name，方便编程式导航和<router-link></router-link>使用
访问子路由时，父组件始终复用
这是嵌套路由的关键行为：父组件实例不会销毁重建，只有子 <router-view></router-view> 内容切换。因此父组件内的 data、watch、生命周期钩子（如 onMounted）只执行一次。
- 适合需要保持状态的场景，比如用户详情页的顶部信息固定，下方 Tab 切换不同模块
- 若需响应子路由变化，可在父组件中监听
$route或使用watch监听$route.params/$route.name - 避免在父组件
setup中重复请求用户基础数据，改用子组件按需加载业务数据
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
