前端路由是匹配引擎、状态控制器、历史栈协同工作的系统：匹配引擎负责路径解析与参数提取；状态控制器维护路由栈并通知视图更新；历史栈通过Browser/Hash/Memory模式对接浏览器API；微前端等场景需扩展前缀隔离与导航守卫。
路由不是简单跳转，而是由匹配引擎、状态控制器、历史栈三者协同工作的系统。理解它们各自的职责和交互方式，才能真正掌握前端路由的底层逻辑。
路由匹配引擎：把路径变成页面的“翻译官”
无论 Vue Router 的 resolve、React Router 的 matchRoutes，还是 auto_route_library 的 RouteMatcher，核心任务都一样：把用户输入的 URL 或路由名，精准对应到一个页面组件。
这个过程通常包含几步：
- 路径分段比对：将
/user/123/profile拆成["user", ":id", "profile"]，再与配置中的"/user/:id/profile"逐段匹配 - 参数提取：识别出
:id是动态段，把"123"提取为参数对象{ id: "123" } - 通配符支持：用
*匹配任意剩余路径，常用于 404 页面或文件托管路由 - 重定向处理：若配置了
redirect: "/home"，匹配后直接生成跳转指令，不渲染原目标
路由状态控制器：维护当前“在哪”的指挥中心
匹配只是第一步，真正决定 UI 渲染的是路由状态。这个状态由控制器统一管理，比如 Vue Router 的 Router 实例、auto_route_library 的 RoutingController。
它主要做四件事：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 维护路由栈：记录当前激活的页面链路（如 Home → List → Detail），支持
push、pop、replace - 触发状态通知：当栈发生变化时，主动通知所有监听者（比如
- 协调嵌套路由：子路由的 push/pop 不影响父路由栈，但需同步更新嵌套视图的显示状态
- 对接导航历史：把每次操作映射到浏览器
history的真实记录，确保前进/后退按钮可用
历史栈管理：浏览器与应用之间的桥梁
前端路由依赖浏览器的 history API 实现无刷新跳转。主流有三种实现：
-
Browser History：调用
pushState()和replaceState()，URL 干净（如/about），但需服务端配合避免 404 -
Hash History：操作
window.location.hash，URL 带#（如/#/about），兼容性好，无需服务端配置 - Memory History：纯内存维护历史栈，适用于非浏览器环境（如测试、React Native）
所有模式都提供统一接口：push、replace、go、listen。监听函数接收 { location, action }，其中 action 可以是 "PUSH"、"REPLACE" 或 "POP"（来自浏览器前进/后退）。
微前端与自定义路由栈：隔离与扩展的关键场景
在复杂架构中，标准路由机制需要增强：
- 微前端通过沙箱劫持
pushState，自动拼接子应用前缀（如/vue3-app/order），既保持独立又共享全局 history 栈 - 鸿蒙或某些跨端框架会构建自定义路由栈（如
DynamicsRouter.routerStack），显式记录来源页，方便返回时差异化处理 UI - 部分业务需要拦截导航（如未保存表单时提示），靠的是在控制器层插入守卫逻辑，在匹配完成、状态变更前执行校验
