前端路由：hash 与 history，原理剖析与应用选择指南

2023-09-30 22:47:55

在现代 Web 开发中，路由已成为构建单页面应用程序 (SPA) 的基石。它使我们能够管理应用程序中的页面导航，并为用户提供流畅的浏览体验。在前端路由领域，hash 和 history 是两种广泛使用的技术，每种技术都具有其独特的优势和缺点。本文将深入探讨 hash 和 history 路由的原理、比较它们的特性，并指导您在项目中做出明智的决策。

Hash 路由：简单而有限

Hash 路由通过在 URL 中使用 # 符号后接锚点 (hash) 值来实现路由。例如，以下 URL 使用 hash 路由指向应用程序的 home 页面：

https://example.com/app/#/home

hash 路由的实现原理非常简单。当用户单击带锚点的链接或在地址栏中输入带有锚点的 URL 时，浏览器将仅更新 URL 的哈希部分，而不会重新加载页面。应用程序随后可以监听哈希值的变化，并根据更新后的哈希值呈现相应的页面或组件。

优点：

简单易用： hash 路由的实现非常简单，甚至不需要任何 JavaScript 代码。
浏览器兼容性： hash 路由得到所有现代浏览器的支持，包括较旧的版本。
SEO 友好： 搜索引擎可以抓取 hash 路由的 URL，这有利于 SEO。

缺点：

URL 中的锚点： hash 路由的 URL 中包含锚点 (#)，这可能被认为是不美观的。
页面刷新问题： 如果用户刷新带有哈希值的 URL，应用程序将无法恢复到正确的页面状态。
不支持后退按钮： 使用 hash 路由时，浏览器后退按钮的行为是不可预测的，因为它仅更改 URL 的哈希部分。

History 路由：现代且强大

History 路由使用 HTML5 History API 中的 pushState() 和 replaceState() 方法来管理浏览器历史记录，实现路由。与 hash 路由不同，history 路由不会更改 URL 中的哈希值。相反，它会更改 URL 的路径部分。

例如，以下 URL 使用 history 路由指向应用程序的 home 页面：

https://example.com/app/home

history 路由的实现需要一些 JavaScript 代码，但它提供了比 hash 路由更强大的功能。当用户单击链接或在地址栏中输入 URL 时，浏览器会更新 URL 的路径部分，并触发 popstate 事件。应用程序随后可以监听 popstate 事件，并根据更新后的 URL 呈现相应的页面或组件。

优点：

无锚点 URL： history 路由使用干净的 URL，不包含锚点，这在视觉上更令人愉悦。
后退按钮支持： history 路由支持浏览器后退按钮，允许用户通过单击后退按钮返回到应用程序的先前状态。
可编程性： history 路由允许通过 pushState() 和 replaceState() 方法编程方式控制浏览器历史记录，这提供了更多的灵活性。