深入理解 Vue Router

在前端单页应用（SPA）中，路由是连接用户操作与页面展示的核心桥梁。Vue Router 作为 Vue 官方的路由管理器，提供了丰富的功能和灵活的配置。本文将围绕"路由模式"、"router 与 route 的区别"、"导航守卫的种类"以及"完整的导航解析流程"四个方面，带你深入理解 Vue Router 的工作机制。

一、路由模式：hash 与 history 的实现原理

Vue Router 支持两种主流的路由模式：hash 模式和 history 模式。它们的底层实现机制不同，决定了使用方式和部署时的差异。

1. hash 模式

hash 模式是基于 URL 中 # 后面的内容变化实现的。浏览器不会将 # 后的部分发送到服务器，因此不会触发页面刷新。

监听机制：通过监听 window.onhashchange 事件，捕获 hash 值的变化。
优点：
- 兼容性好，支持 IE 及以下版本。
- 部署简单，刷新页面不会 404。
缺点：
- URL 不够美观，带有 # 符号。

2. history 模式

history 模式依赖 HTML5 提供的 pushState 和 replaceState API，可以在不刷新页面的情况下修改 URL。

监听机制：通过监听 popstate 事件，捕获浏览器前进/后退操作。
优点：
- URL 更干净，没有 #。
缺点：
- 需要后端配合，刷新页面或直接访问子路径时，需将所有请求重定向到入口文件（如 index.html），否则会返回 404。
- 对低版本浏览器支持不佳。

二、router 与 route 的区别

在 Vue 组件中，我们常常使用 this.$router 和 this.$route，但它们代表的含义完全不同：

router

是 Vue Router 的实例对象，包含整个路由的配置和控制方法。
常用方法：
- this.$router.push()：跳转到指定路由，添加一条历史记录。
- this.$router.replace()：替换当前路由，不添加历史记录。
- this.$router.go(n)：前进或后退 n 步。

route

是当前激活路由的信息对象，包含与当前路径相关的所有信息。
常用属性：
- this.$route.path：当前路径，如 /user/123。
- this.$route.params：动态路由参数，如 { id: 123 }。
- this.$route.query：查询参数，如 ?tab=profile 对应 { tab: 'profile' }。
- this.$route.name：当前路由的名称。
- this.$route.meta：路由元信息，常用于权限控制。

简言之：router 是"路由器"，负责操作；route 是"当前路线"，负责提供信息。

三、导航守卫的种类

Vue Router 提供了多种导航守卫，用于在路由跳转前后执行逻辑控制，分为三大类：

1. 全局守卫

作用于整个应用，定义在 router 实例上：

router.beforeEach(to, from, next)：全局前置守卫，常用于登录验证。
router.beforeResolve(to, from, next)：全局解析守卫，2.5+ 引入，所有组件内守卫和异步路由组件解析完成后触发。
router.afterEach(to, from)：全局后置钩子，不能拦截导航，常用于页面埋点。

2. 路由独享守卫

定义在单个路由配置中，仅对该路由生效：

beforeEnter(to, from, next)：进入该路由前触发，用法与全局守卫类似。

3. 组件内守卫

定义在 Vue 组件内部，与组件生命周期紧密结合：

beforeRouteEnter(to, from, next)：组件被激活前调用，此时组件实例尚未创建，无法访问 this。
beforeRouteUpdate(to, from, next)：当前路由改变但组件被复用时调用（如 /user/1 → /user/2）。
beforeRouteLeave(to, from, next)：离开当前路由时调用，可用于提示用户保存未提交的表单。

四、完整的导航解析流程

Vue Router 的导航过程是一个链式调用的过程，每一步都可以中断或继续。以下是完整的流程：

导航触发：用户点击 <router-link> 或调用 $router.push()。
调用失活组件的 beforeRouteLeave：如从 /user/1 跳转到 /about。
调用全局 beforeEach 守卫。
调用重用组件的 beforeRouteUpdate（若组件被复用）。
调用路由独享的 beforeEnter。
解析异步组件（若该路由配置了异步组件）。
调用激活组件的 beforeRouteEnter。
调用全局 beforeResolve 守卫。
导航被确认。
调用全局 afterEach 钩子。
触发 DOM 更新。
执行 beforeRouteEnter 中 next 的回调，此时组件实例已创建，可通过回调参数访问。