vue-router 提供了两种常见的路由模式：hash 模式 和 history 模式。这两种模式的主要区别在于 URL 的表现形式、路由的工作机制、以及它们如何与浏览器的历史记录和后端服务器交互。
1. Hash 模式 (`#`)
工作原理：
Hash 模式 是通过 URL 中的 hash (`#`) 符号来管理路由。浏览器不会发送 hash 后的内容到服务器，而是由前端 JavaScript 处理 URL 中 hash 后的部分。
例如，`http://example.com/#/home`，这里的 `#/home` 只是前端 JavaScript 处理的部分，服务器仅加载 `http://example.com/`。
特点：
- 不需要服务器支持**：由于 hash 模式不会改变浏览器的实际路径，它不会向服务器发送请求，因此服务器无需特别配置支持。
- 兼容性：支持所有浏览器，包括较老版本的浏览器。
- 用户体验：用户刷新页面时，仍然能保持当前的 hash 路径，页面不会跳转到 404 页面。
- URL：在 URL 中，`#` 后面的部分不会被浏览器发送到服务器，这意味着 URL 中包含的 hash 值仅仅是客户端的路由状态。例如：`http://example.com/#/home`。
示例：
javascript
const router = new VueRouter({
mode: 'hash',
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
});
优缺点：
- 优点：
- 配置简单，不需要额外的服务器配置。
- 对于老旧浏览器也有良好的支持。
- 缺点：
- URL 不够优雅，带有 `#` 符号。
- 不利于 SEO（搜索引擎优化），因为很多爬虫不解析 `#` 后的内容。
- 不支持浏览器的 "pushState" 和 "replaceState" 等历史记录 API，因此相对于 history 模式灵活性较差。
---
2. History 模式 (`HTML5 history API`)
工作原理：
- History 模式 依赖于 HTML5 中的 `history.pushState()` 和 `history.replaceState()` API 来管理浏览器的历史记录。使用此模式时，URL 不会包含 `#`，而是表现为正常的路径，例如：`http://example.com/home`。
- 当用户点击浏览器的前进/后退按钮时，`vue-router` 会根据 URL 改变页面内容，但不会进行全页面的刷新。
特点：
- 不包含 `#`：URL 更加简洁、优雅，符合传统的 RESTful 风格。
- 需要服务器支持：当用户直接刷新页面时，浏览器会向服务器发出请求。若刷新一个非根路径（例如：`/home`），服务器需要配置重定向或处理所有请求并返回同一个 HTML 文件，确保 Vue 应用能正常运行。如果服务器没有进行适当的配置，刷新可能导致 404 错误。
- SEO 友好：由于没有 hash 符号，URL 看起来更像传统的网站 URL，有助于 SEO，搜索引擎可以正确地解析和索引路径。
示例：
javascript
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
});
优缺点：
- 优点：
- URL 清晰简洁，符合 RESTful 风格。
- 支持现代浏览器的历史记录 API，具有更高的灵活性。
- 更友好的 SEO 支持。
- 缺点：
- 需要服务器配置支持。当用户直接访问一个非根路径（例如：`/home`）时，服务器需要确保返回正确的 HTML 文件，而不仅仅是返回 404 错误。
- 对旧版浏览器（如 IE 9 以下）不支持 `history.pushState()`，需要 polyfill 或使用其他解决方案。
---
3. 总结
| 特性 | Hash 模式 | History 模式 |
|--------------------------|--------------------------------------------------|---------------------------------------------------|
| URL 显示 | 带 `#`，例如 `http://example.com/#/home` | 无 `#`，例如 `http://example.com/home` |
| 是否需要服务器支持 | 不需要 | 需要，服务器需要正确配置以处理非根路径 |
| SEO 友好 | 不太友好，搜索引擎通常无法解析 `#` 后的内容 | SEO 友好，搜索引擎能正确解析路径 |
| 兼容性 | 兼容所有浏览器，尤其是旧版本浏览器 | 现代浏览器支持较好，旧版浏览器不完全支持 |
| 用户体验 | 刷新页面时，hash 变化不会影响页面加载，易于管理 | 刷新页面时，服务器需要处理并返回 HTML 页面 |
| 历史记录 | 不支持历史记录 API 的细粒度控制 | 支持 `history.pushState()` 和 `history.replaceState()` API，控制历史记录更灵活 |
选择建议：
- Hash 模式：适用于不需要 SEO 支持的应用，或者需要兼容旧版浏览器的场景。也适用于不希望或不能配置服务器的应用。
- History 模式：适用于现代 Web 应用，需要干净的 URL 和更好的 SEO 支持的场景，但需要配置服务器处理路由。