Appearance
Vue Router:路由匹配、导航守卫与异步页面切换
主题边界
- Vue Router 负责把 URL 解析成 route record、参数和组件树,并协调页面切换过程。
- 理解它时要把路径匹配、历史记录、导航守卫和异步加载放在同一链路里。
机制与流程
- 路由器根据 path ranking 与 record 树匹配 URL,产出
matched数组,再由RouterView按层级渲染组件。 - 导航会经历全局守卫、路由独享守卫、组件内守卫、异步组件解析和确认提交等阶段。
- history 模式只是底层 URL 同步实现不同,核心仍是 route state 的更新与渲染。
关键差异
- 前端路由解决的是单页应用内的导航状态;服务端路由决定真正由哪个服务返回文档。
- 参数、query、hash 都影响路由状态,但缓存、滚动恢复和数据获取策略通常要额外设计。
边界条件
- 守卫里做过多异步请求会拉长导航阻塞时间,造成页面切换卡顿。
- 把页面数据完全依赖路由守卫拉取,容易与组件级缓存和 Suspense 产生职责重叠。
工程落点
- 权限控制、懒加载、埋点、滚动恢复和错误页都依赖路由生命周期正确落点。
- 当路由 record 过多时,要关注分包粒度、首包入口和动态 import 的 chunk 切分。