路由的 hash 模式 和 history 模式的区别是什么？

让我详细解释一下路由的 hash 模式和 history 模式的区别：

1. URL 格式区别：

• Hash 模式：使用 # 号，例如：www.example.com/#/home 2
• History 模式：更像传统的 URL，例如：www.example.com/home 2

2. 工作原理区别：

• Hash 模式：

  • 使用 URL 的 hash（#）部分来模拟完整的 URL
  • hash 部分不会被发送到服务器
  • 基于浏览器的 hashchange 事件 2

• History 模式：

  • 基于 HTML5 的 History API
  • 使用 pushState 和 replaceState 方法来管理历史记录
  • URL 更美观，更像传统的服务器端路由 2

3. 服务器配置要求：

• Hash 模式：

  • 不需要特殊的服务器配置
  • 因为 hash 部分不会发送到服务器
  • 对 SEO 不太友好 2

• History 模式：

  • 需要服务器配置支持
  • 需要配置所有路由都返回 index.html
  • 否则会出现 404 错误 2

4. 服务器配置示例（History 模式）：

Apache 配置：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Nginx 配置：

location / {
  try_files $uri $uri/ /index.html;
}

5. 如何选择：

• 选择 Hash 模式如果：

  • 不想配置服务器
  • 项目不需要考虑 URL 的美观性
  • 对 SEO 要求不高

• 选择 History 模式如果：

  • 需要更好的 URL 外观
  • 项目需要更好的 SEO
  • 可以控制服务器配置

6. 兼容性考虑：

• Hash 模式：兼容性更好，支持更多的浏览器
• History 模式：需要 HTML5 History API 支持，较新的浏览器都支持

7. 迁移建议： 如果要从 Hash 模式迁移到 History 模式：
8. 确保服务器已正确配置
9. 更新路由配置
10. 测试所有路由是否正常工作
11. 检查直接访问路由是否正常 2

在实际开发中，如果你使用的是现代前端框架（如 Next.js、Umi 等），它们通常会默认使用 History 模式并自动处理服务器配置，使开发者可以专注于业务逻辑的开发。

---

来源：Claude 3.5 Sonnet

---

此文自动发布于：github issues