面试题：Vue Router 的 hash 模式和 history 模式有什么区别？

Vue Router 的 hash 模式 和 history 模式 是两种实现单页面应用（SPA）路由的机制，它们在 URL 结构、工作原理、服务器配置要求 和 用户体验 上有显著区别。

以下是它们的核心区别：

---

1. URL 结构与外观

模式	URL 示例	特点
Hash 模式	http://example.com/#/home	URL 中包含 # (hash)。# 后面的部分（如 /home）不会发送到服务器。
History 模式	http://example.com/home	URL 看起来和传统的多页面应用一样，没有 #，更加“干净”和美观。

• 结论：History 模式生成的 URL 更符合现代 Web 应用的审美和用户预期。

---

2. 工作原理

模式	原理
Hash 模式	利用 URL 的 hash 部分（# 后的内容）来模拟路由。浏览器不会将 # 及其后面的内容发送给服务器。Vue Router 监听 window 对象的 hashchange 事件，当 hash 改变时，根据路由规则动态渲染对应的组件。
History 模式	利用 HTML5 的 History API（history.pushState()、history.replaceState() 和 popstate 事件）来改变浏览器地址栏的 URL，而无需向服务器发送请求或刷新页面。Vue Router 通过这些 API 实现无刷新导航。

• 关键点：Hash 模式依赖 # 和 hashchange 事件；History 模式依赖 HTML5 History API。

---

3. 服务器配置要求

模式	服务器要求
Hash 模式	✅ 无需特殊配置。因为 # 不会发送到服务器，无论用户访问哪个路由，服务器都返回同一个 HTML 文件（通常是 index.html）。部署非常简单，适用于任何静态服务器。
History 模式	❌ 必须配置服务器。这是最大的限制。当用户直接访问一个路由（如 http://example.com/about）或刷新页面时，浏览器会向服务器请求 /about 这个资源。如果服务器没有配置，会返回 404 错误。服务器必须配置为：对于所有前端路由路径，都返回 index.html 文件。

---

4. 兼容性

模式	兼容性
Hash 模式	✅ 兼容性极好。支持所有现代浏览器，包括较老的版本（如 IE8+）。
History 模式	⚠️ 需要支持 HTML5 History API 的浏览器。不支持 IE9 及以下版本。

• 结论：如果需要支持非常老的浏览器，Hash 模式是更安全的选择。

---

5. SEO (搜索引擎优化)

模式	SEO 影响
Hash 模式	⚠️ 对 SEO 不友好。传统上，搜索引擎爬虫可能不会执行 # 后面的 JavaScript，导致无法索引 SPA 的内容。虽然现代爬虫已能处理，但仍存在风险。
History 模式	✅ 相对更有利。干净的 URL 更符合搜索引擎的抓取习惯。但 SPA 的 SEO 问题仍需通过服务端渲染（SSR）或预渲染（Prerendering）来彻底解决。

• 注意：仅靠 History 模式并不能完全解决 SPA 的 SEO 问题，但它是一个有利因素。

---

如何选择？

选择标准	推荐模式
追求美观 URL 和良好用户体验	✅ History 模式
可以控制服务器配置	✅ History 模式
需要支持老浏览器	✅ Hash 模式
无法修改服务器配置（如静态托管）	✅ Hash 模式
快速原型开发或演示	✅ Hash 模式

---

总结对比表

特性	Hash 模式	History 模式
URL 外观	有 # (如 /#/home)	无 # (如 /home)
服务器配置	无需配置	必须配置回退路由
部署难度	简单	需要后端支持
兼容性	极好 (IE8+)	需要 HTML5 History API (IE10+)
SEO	不友好	相对友好
实现原理	hashchange 事件	HTML5 History API (pushState, replaceState)

在 Vue Router 中，可以通过 createWebHashHistory() 和 createWebHistory() 来创建对应的路由实例。选择哪种模式取决于你的项目需求、部署环境和对用户体验的要求。