HTML5原生不支持嵌套路由，其由SPA框架基于History API封装实现；Vue Router通过父子router-view与children配置实现，React Router v6则依赖Outlet和嵌套路由定义；history.pushState仅能修改URL，无法触发组件渲染与生命周期。
HTML5 嵌套路由跳转不是靠“手动操作 history.pushState”实现的，而是由 SPA 框架（如 Vue Router、React Router、Angular Router）在 HTML5 History API 基础上封装出的声明式嵌套能力。原生 HTML5 不提供“嵌套路由”概念——它只管 URL 和历史栈，嵌套是框架对 path 匹配、outlet 占位、组件生命周期协同的抽象。
Vue Router 怎么写嵌套路由并触发跳转
嵌套路由的核心是父子 router-view + 子路由配置中带 children 数组。跳转仍用 router.push，但路径必须匹配嵌套结构。
- 父级路由需定义
children，且子路由path不能以/开头（否则变成绝对路径，脱离嵌套上下文） -
router.push({ name: 'Parent.Child' })是最安全的方式，避免路径拼错；若用路径，得写成router.push('/parent/child')，而非'/child' - 父组件模板里必须有
<router-view></router-view>，否则子路由组件无处渲染 - 注意：子路由的
path: ''表示默认子路由（访问/parent时显示），此时需确保父组件已挂载且含router-view
React Router v6 的嵌套路由跳转为什么总不生效
v6 彻底移除了 <Switch>，改用 <Outlet> 作为子路由出口，且路由定义必须显式嵌套——跳转失效往往因结构断裂或导航方式错配。
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
- 父路由配置必须用
element包裹<Outlet>，例如：element: <><Layout /><Outlet /></> - 子路由不能独立存在，必须作为父路由的
children数组项，且父路由path末尾不加*（除非有意通配） - 跳转用
useNavigate()，传入相对路径时，当前路由必须是父级上下文（即浏览器地址栏显示的是父路径），否则相对路径解析失败 - 常见错误：
navigate('child')在非父路由组件中执行 → 解析为根路径下的/child，而非/parent/child
history.pushState 能否直接模拟嵌套路由跳转
可以改 URL 并触发 popstate，但无法自动渲染对应嵌套组件、不触发守卫、不管理组件实例生命周期——它只是“骗过浏览器地址栏”，不是路由跳转的完整替代。
立即学习“前端免费学习笔记（深入）”；
-
history.pushState({}, '', '/parent/child')会变地址、加历史项，但 Vue/React Router 完全感知不到（除非你手动调用router.replace同步） - 强行混用会导致状态不一致：URL 是
/parent/child，但实际渲染的还是上一个路由的组件树 - 仅适合极简场景（如纯静态页切换），SPA 中应始终通过框架 API 跳转，让框架控制匹配、加载、卸载全流程
嵌套路由真正难的不是写法，而是父子路由间的数据流控制和加载时机协调——比如子路由需要父路由的 id 参数，但父组件还没完成异步数据获取，这时子路由的 loader 或 beforeRouteEnter 就容易误判依赖状态。这个层面的问题，光看跳转语法根本发现不了。
