Vue Router 是 Vue.js 应用程序中的官方路由库，它负责管理应用程序的导航和视图切换。本文将深入探讨 Vue Router 的实现原理及其两种主要工作模式：Hash 模式和 History 模式。
1. **Vue Router 的核心原理**
Vue Router 的主要目标是在不重新加载整个页面的情况下，根据 URL 的变化更新视图。它通过监听 URL 的变化来触发相应的视图更新，实现了单页应用(SPA)的路由功能。在浏览器环境中，Vue Router 提供了两种实现方式。
2. **Hash 模式**
- **基本原理**：Hash 模式利用浏览器 URL 中的 `#` 符号。`#` 后面的部分不会被包含在 HTTP 请求中，仅用于浏览器内部处理，因此改变 `#` 后的哈希值不会导致页面重新加载。
- **监听变化**：Vue Router 可以通过 `window.addEventListener("hashchange", funcRef, false)` 监听 `#` 的变化，当哈希值改变时，触发相应的视图更新。
- **优点**：兼容性好，适用于所有支持 JavaScript 的浏览器，无需额外服务器配置。
3. **History 模式**
- **HTML5 History 接口**：HTML5 引入的 History 接口提供了 `pushState` 和 `replaceState` 方法，允许我们修改浏览器的历史记录栈而不刷新页面。
- **状态管理**：`pushState` 和 `replaceState` 可以改变 URL，同时在历史记录栈中添加或替换一条记录，而不会触发页面刷新。
- **监听变化**：Vue Router 使用 `popstate` 事件监听浏览器历史记录的变化，当用户点击前进/后退按钮或者通过代码触发状态改变时，执行相应的视图更新逻辑。
- **服务器配置**：History 模式需要后端服务器配合，因为当浏览器直接访问一个没有 `#` 的 URL 时，服务器需要能够返回应用的主页，以便 Vue Router 正确处理路由。
4. **Vue Router 的 `mode` 属性**
在初始化 Vue Router 时，可以通过 `mode` 属性选择工作模式。默认情况下，如果未指定 `mode`，Vue Router 将使用 Hash 模式。如果设置为 `'history'`，则采用 History 模式。在 History 模式下，如果没有服务器配置，Vue Router 还提供了一个 fallback 选项，当不支持 History 模式时，自动回退到 Hash 模式。
5. **源码分析**
Vue Router 的构造函数中，会根据提供的选项初始化各种钩子函数和匹配器，并根据 `mode` 属性选择合适的路由处理策略。在 History 模式下，如果浏览器不支持 `pushState`，且 `fallback` 设置为 `false`，Vue Router 将抛出错误，提示需要后端支持。
Vue Router 的工作原理是通过监听和响应 URL 的变化，动态地更新应用程序的视图。Hash 模式依赖于 `#` 符号，而 History 模式则利用 HTML5 History API 实现更友好的 URL 结构，但需要后端支持。选择哪种模式取决于项目需求和环境支持。
