使用 JavaScript 实现 Hash 和 History 路由：终极指南

2023-09-22 21:21:35

引言

随着单页面应用（SPA）的兴起，高效且灵活的路由机制已成为现代 Web 开发不可或缺的一部分。JavaScript 中的 Hash 路由和 History 路由提供了强大的工具，可让您在不重新加载页面的情况下管理应用状态和导航。在本文中，我们将深入探讨这两种路由技术，并提供一个分步指南，指导您使用 JavaScript 实现它们。

Hash 路由

Hash 路由利用浏览器地址栏中的 hash（#）符号来跟踪应用状态和导航。当 hash 更改时，浏览器会触发事件，您可以使用 JavaScript 代码对其进行响应，从而更新应用状态和显示相应的视图。

优势：

易于实施
浏览器支持广泛
不需要服务器端配置

局限性：

哈希可见且不美观
哈希更改不会记录在浏览器的历史记录中
一些较旧的浏览器可能不支持

History 路由

History 路由使用浏览器历史 API 来管理应用状态和导航。通过使用 pushState() 和 replaceState() 方法，您可以更新浏览器历史记录，同时不实际重新加载页面。

优势：

更美观且用户友好
浏览器支持良好
路径更改记录在浏览器的历史记录中

局限性：

需要服务器端配置
一些较旧的浏览器可能不支持

JavaScript 中的路由实现

Hash 路由

监听哈希更改事件： 使用 window.addEventListener() 监听 "hashchange" 事件。
更新应用状态： 在事件处理程序中，解析新的哈希并更新应用状态。
显示相应视图： 根据新的应用状态，显示相应的视图。

示例：

window.addEventListener('hashchange', function() {
  const newHash = window.location.hash;
  // 解析新哈希并更新应用状态
  // ...

  // 显示相应视图
  // ...
});

History 路由

使用 pushState() 更新历史记录： 在导航事件处理程序中，使用 history.pushState() 方法更新浏览器历史记录。
监听浏览器历史更改： 使用 window.addEventListener() 监听 "popstate" 事件。
更新应用状态和视图： 在 "popstate" 事件处理程序中，更新应用状态和显示相应视图。

示例：

window.addEventListener('popstate', function(event) {
  const newUrl = window.location.pathname;
  // 解析新 URL 并更新应用状态
  // ...

  // 显示相应视图
  // ...
});