router.push 是一次受控的响应式视图迁移：先通过 history.pushState 同步 URL 并生成 RouteLocation，再匹配路由、执行可中断的导航守卫链，最后协调组件卸载/挂载与响应式更新。
router.push 看似只是跳转一个 URL，背后却串联了路由解析、导航守卫、组件卸载与挂载、响应式更新、DOM 渲染等多个环节。它不是简单的 location.href 赋值，而是一次受控的、可中断的、响应式的视图迁移过程。
URL 变更：history.pushState 与浏览器同步
调用 router.push 时，Vue Router 默认使用 history.pushState（非 hash 模式）修改地址栏，不触发页面刷新。这一步本身不加载新资源，仅变更浏览器历史栈和当前 URL。Router 内部会生成一个标准化的 RouteLocation 对象，包含 name、path、params、query、hash 等字段，并与当前 history.state 合并后写入栈。若用户点击浏览器后退/前进按钮，popstate 事件被监听，Router 捕获后触发新一轮导航流程。
导航解析：从 location 到 matched routes
Router 收到新 location 后，立即执行匹配逻辑：
- 遍历所有已注册的 routes 配置，按 path 顺序 + 优先级规则（如 /user/:id > /user）进行深度优先匹配
- 提取 params、合并 query/hash、解析 alias 和 redirect
- 生成 matched 数组，每个元素对应一个嵌套路由记录（RouteRecord），含 component、children、meta 等元信息
- 最终构造出完整的 RouteLocationNormalized —— 导航就绪的标准化路由对象
导航守卫：可中断的生命周期钩子链
Router 按顺序执行三类守卫，任一守卫 返回 false / 抛错 / 返回字符串 / 返回 Promise.reject() 即中止导航：
- 全局前置守卫（beforeEach）：常用于权限校验、埋点、加载状态
- 独享守卫（beforeEnter）：定义在单个 route 配置中，只对该路由生效
- 组件内守卫（beforeRouteLeave / beforeRouteUpdate）：在组件实例上下文中执行，可访问 this
所有守卫支持 next()（放行）、next(false)（取消）、next('/login')（重定向）或 return Promise（异步控制），形成灵活的导航流控能力。
组件切换与响应式更新：视图渲染的核心驱动
守卫全部通过后，Router 开始协调视图更新：
- 对比新旧 matched 数组，识别哪些组件需 复用、哪些要 销毁、哪些要 创建
- 对即将卸载的组件，触发 beforeRouteLeave；对即将激活的组件，触发 beforeRouteEnter（此时组件实例尚未创建，this 不可用）
- 更新 router.currentRoute.value（Ref 响应式对象），触发依赖它的所有响应式副作用，包括 <router-view> 的渲染函数
- <router-view> 根据当前 route.matched 动态渲染嵌套组件树，内部使用 keep-alive 时还会管理缓存 key 与激活状态
整个过程完全运行在 Vue 的响应式系统内，无手动 DOM 操作，也无需强制 re-render。
理解这一链路，有助于精准定位白屏、守卫不触发、组件未更新、重复请求等典型问题。关键不在“怎么跳”，而在“谁在控制跳、何时允许跳、跳完如何稳住视图”。
