Vue Router 中的 History 和 Hash 模式是实现单页面应用（SPA）无刷新导航的两种核心方式，它们在工作原理、兼容性和使用场景上有着明显的区别。为了让你快速把握全局，下面这个表格汇总了它们的核心差异。
| 特性对比 | Hash 模式 | History 模式 |
|---|---|---|
| URL 表现形式 | 包含 #，如 site.com/#/about | 无 #，如 site.com/about，更简洁美观 |
| 实现原理 | 利用 window.onhashchange事件监听 URL 中 #后哈希值的变化 | 利用 HTML5 History API (pushState, replaceState) 操作浏览器历史记录栈 |
| 兼容性 | 兼容所有浏览器，包括 IE8 等老旧浏览器 | 需要浏览器支持 HTML5 History API（IE10+） |
| 服务器配置 | 无需特殊配置。哈希值 (#之后内容) 不会发送到服务器 | 必须配置。需让服务器对所有路由返回 index.html，否则直接访问或刷新子路由会报404 |
| SEO (搜索引擎优化) | 较差，搜索引擎通常忽略 #后面的内容 | 更友好，URL 结构清晰，便于搜索引擎抓取 |
| 锚点功能 | 无法使用原生页面锚点（因 #被路由占用） | 支持原生锚点（如 site.com/about#section1） |
🔧 工作原理与部署差异
- Hash 模式：其核心在于 URL 中
#后面的哈希值变化不会触发浏览器向服务器发送请求。Vue Router 通过监听hashchange事件来感知变化，匹配相应组件并更新视图，整个过程都在前端完成 。因此，在部署时，Hash 模式非常简单，只需将打包后的静态文件放到服务器即可，无需后端做任何特殊处理 。 - History 模式：它利用了 HTML5 提供的
history.pushState()和history.replaceState()方法。这些方法允许你直接修改浏览器的历史记录和当前显示的 URL，而不会导致页面刷新 。然而，当你直接访问一个 History 模式的 URL（如site.com/about）或在该页面刷新时，浏览器会向服务器请求这个路径的资源。如果服务器没有配置将所有路由指向唯一的入口文件（如index.html），就会返回 404 错误。常见的服务器（如 Nginx、Apache）都需要进行相应配置 。
💡 如何选择？
选择哪种模式取决于你的项目需求和技术环境：
-
选择 Hash 模式的情况：
- 项目需要兼容旧版浏览器（如 IE9 及以下）。
- 项目部署在静态服务器或无法进行后端路由配置的环境（如 GitHub Pages）。
- 项目对 URL 美观度和 SEO 要求不高，追求快速简单的部署 。
-
选择 History 模式的情况：
- 项目主要面向现代浏览器。
- 非常看重 URL 的美观和清晰度，希望提升用户体验。
- 项目需要进行 搜索引擎优化（SEO）。
- 你拥有服务器的配置权限，能够完成所需的路由回退配置 。
⚠️ 注意事项
- History 模式的 404 陷阱：这是使用 History 模式时最常遇到的问题。务必记得在部署前，根据你的服务器类型（Nginx、Apache、Node.js 等）进行正确配置，确保所有非静态资源路径都返回
index.html。 - Hash 模式下的锚点：如果你在 Hash 模式下需要实现页面内跳转的锚点功能，由于
#符号已被路由占用，你需要使用 JavaScript 自行实现滚动到指定位置的功能，或借助像vue-scrollto这样的库 。
希望这些清晰的对比和解释能帮助你根据项目情况做出最合适的选择。
