Vue Router 中 History 与 Hash 模式深入对比

一、核心要点速览

💡 核心考点

• Hash 模式: URL 带有 # 符号。
• History 模式: URL 与普通网站一致。
• 关键差异: 实现机制（hashchange vs popstate）、SEO 友好度、服务器配置要求。
• 部署配置: History 模式必须在服务器端配置“兜底”路由（如 Nginx 的 try_files）。

---

二、基础概念与实现

1. Hash 模式

Hash 模式的 URL 示例：https://example.com/#/home。

• 实现原理：基于 location.hash 和 window.onhashchange 事件。
• 关键点：# 及其后面的内容不会发送到服务器。

2. History 模式

History 模式的 URL 示例：https://example.com/home。

• 实现原理：基于 HTML5 的 History API (pushState, replaceState) 和 window.onpopstate 事件。
• 关键点：全路径都会发送到服务器。

---

三、核心对比汇总

特性	Hash 模式	History 模式
URL 形式	example.com/#/user	example.com/user
SEO 友好度	一般（部分引擎不抓取 # 后内容）	极佳
服务器配置	不需要	必须配置（否则刷新 404）
实现机制	hashchange 事件	popstate 事件 + History API
兼容性	支持 IE8+	支持 IE10+
美观度	略低（带有 #）	高（更符合常规 URL）

---

四、生产环境部署：为什么 History 模式需要后端支持？

在 History 模式下，当用户直接访问 example.com/home 或刷新页面时，浏览器会向服务器请求 /home。如果服务器没有对应文件，就会报 404。

1. Nginx 配置逻辑

通过 try_files 指令，我们可以让 Nginx 在找不到文件时，始终返回 index.html，从而让前端路由接管路径解析。

2. Nginx 配置代码

server {
  listen 80;
  server_name example.com;
  root /var/www/html;
  index index.html;

  location / {
    # 核心配置：依次检查文件、目录，不存在则返回 index.html
    try_files $uri $uri/ /index.html;
  }
}

---

五、如何选择？

1. 推荐使用 History 模式的场景：

• 官网、博客、门户网站：对 SEO 有极高要求。
• 追求 URL 美观：提升用户感官体验。
• 有后端支持能力：能够修改 Nginx 或 Apache 等服务器配置。

2. 推荐使用 Hash 模式的场景：

• 管理后台、Dashboard：对 SEO 无要求。
• 快速原型开发：无需配置服务器，直接部署。
• 老旧浏览器兼容：需要支持 IE8/9。

---

六、面试回答要点

Q: 请对比一下 Vue Router 的两种模式？

1. Hash 模式：URL 带 #，通过 hashchange 事件监听。特点是兼容性好（IE8+），且 # 后内容不发往后端，无需后端配合。
2. History 模式：URL 美观，通过 HTML5 History API 实现，通过 popstate 监听。特点是 SEO 友好，但需要后端配置“兜底”路由（如 Nginx 的 try_files），防止刷新 404。
3. 本质区别：在于浏览器如何向服务器发送请求。Hash 模式只发根路径，History 模式发全路径。
4. 生产建议：现代项目首选 History 模式，通过配置 Nginx 实现最佳体验。

---

七、总结一句话

• Hash 模式: # 号 + 免配置 = 低成本部署首选 🚀
• History 模式: 美观 + SEO = 现代 Web 应用标配 ✨
• 核心差异: URL 形式 + 服务器配置 = 不同的业务需求 🎯