SPA路由需支撑跳转、状态、权限、懒加载、嵌套布局及SEO等，核心是“路由即状态”；嵌套路由通过outlet实现局部刷新与布局复用，路径须严格嵌套且父组件主动渲染；动态路由需规范解析URL参数、查询参数与类型转换；权限控制应分层拦截于路由进入前；懒加载按路由分组切分代码块并合理预加载。
SPA 路由不是简单配几个 path 就完事，它得支撑页面跳转、状态保持、权限拦截、懒加载、嵌套布局、SEO 友好（服务端渲染或预渲染）等一整套需求。核心在于：路由即状态，状态即体验。
嵌套路由：让 UI 结构和路由结构对齐
嵌套路由解决的是“局部刷新+布局复用”问题。比如后台系统中，左侧菜单固定，右侧内容区随路由变化；或者用户个人页里，/user/profile 和 /user/settings 共享顶部信息栏和导航Tab。
主流框架实现逻辑一致：父路由配置 outlet（React Router 的 <Outlet>、Vue Router 的 <router-view>、Angular 的 <router-outlet>），子路由自动渲染到该位置。
- 路径必须严格嵌套：子路由 path 为相对路径（如
profile），完整路径由父级拼接（/user/profile） - 父路由组件需主动渲染 outlet，否则子路由内容不显示
- 可多层嵌套，但建议控制在 3 层以内，避免路由配置过深、调试困难
- 配合 loader / setup 函数，父路由可提前获取共享数据（如用户基本信息），子路由直接消费
动态路由与参数解析：应对 ID、状态、搜索条件等变体
静态 path（如 /dashboard）只占少数。真实场景中，/post/123、/search?q=react&sort=date、/org/:orgId/team/:teamId 都需要灵活捕获和校验。
关键不在“怎么写 path”，而在“怎么用参数”：
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- URL 参数（
:id）用于标识资源，应配合 loader 做存在性校验，404 处理前移 - 查询参数（
?k=v）适合过滤、分页、排序，建议统一用 URLSearchParams 或库函数解析，避免手动 split - 可选参数（
:id?）或通配符（*）慎用，易导致路由优先级冲突，优先用明确 path + 重定向处理边界 - 参数类型转换别靠字符串拼接——loader 中直接 parseInt、new Date 或自定义解析器，保证数据可信
路由级权限控制：比按钮显隐更早、更稳的守门人
权限不该只靠前端判断按钮是否显示。真正的防线在路由进入前：没权限，就不该看到对应 URL，也不该执行相关数据请求。
推荐分层拦截：
-
全局守卫：检查登录态，未登录重定向到 /login，并缓存原目标地址（
from） -
路由独享守卫：在 route 配置中声明
meta: { roles: ['admin'] }，进入前比对当前用户角色 -
异步权限兜底：用户角色可能动态变更（如后台被降权），路由守卫中调用
checkPermission(route)接口，失败则 push 403 页面 - 注意：权限校验逻辑要可复用，避免每个路由重复写；错误页面（403/404）本身也应有独立路由，且不参与权限拦截
懒加载与路由分组：首屏快，切换也快
把整个应用打包进一个 JS 文件，首屏必然慢。按路由切分代码块（code splitting），是 SPA 性能基操。
- React Router v6.4+：用
lazy+Suspense包裹组件，配合import()动态导入 - Vue Router：路由配置中使用
component: () => import('./views/Admin.vue') - Angular：在 loadChildren 中使用
import('./admin/admin.module').then(m => m.AdminModule) - 进阶技巧：对相似功能模块做 分组懒加载，例如所有报表页共用一个 chunk，避免 10 个报表页生成 10 个 mini-bundle
- 预加载策略可选：空闲时预取非首屏路由（
import(...).then(preload)），但别盲目开启，小心带宽浪费
不复杂但容易忽略。路由体系不是起点也不是终点，它是连接用户意图、UI 结构、数据流和安全边界的主干道。搭得稳，后面加功能才不抖。
