hash路由和history路由

亮学长

已于 2024-01-26 22:53:01 修改

阅读量1.6k

点赞数 24

文章标签：前端

于 2023-12-01 15:56:35 首次发布

本文链接：https://blog.csdn.net/formylovetm/article/details/134736963

版权

Hash

Hash 模式是在 URL 中使用井号（#）来作为路由的模式。在 Hash 模式下，即使页面刷新，浏览器仍然只会请求页面的初始 HTML 文件，所有的路由变化都会在 URL 前面添加 “#/” 符号。

原理
在 Hash 模式下，路由的机制是使用 window.location 中的 hash 属性。将路由路径添加到 URL 的 hash 值中，然后在 JavaScript 中通过监听 hash 值的变化，来响应路由变化。Hash 模式还支持 hashchange 事件，可以在 URL 变化时触发回调函数。

优缺点
优点：Hash 模式的最大特点在于支持在所有浏览器中运行。同时，因为 Hash 路径不会被发送到服务器，因此可以避免服务器配置的问题。

缺点：Hash 模式的 URL 看起来比较难看，因为所有路由信息被放在 URL 的 hash 中。同时，网站爬虫无法识别路由路径，因此不适合用于 SEO。

总结来说，History 模式和 Hash 模式都是用于前端路由的常见机制。History 模式的 URL 更加美观但需要 HTML5 支持，Hash 模式的 URL 不美观但是更加兼容性。开发者在选择路由模式时需要根据具体的项目需求进行权衡。

History

History 模式是通过 HTML5 引入的新特性，它使用浏览器的 History API 来管理历史记录。在 History 模式下，通过设置 HTML5 标准中的 popState 方法，以及 pushState 和 replaceState 方法，可以在不刷新页面的情况下，更改浏览器的 URL。

原理
在 History 模式下，路由的核心机制是使用浏览器提供的 popstate 事件来响应 URL 的变化。在页面加载时，历史堆栈中的当前状态会被保存下来，每当用户点击浏览器的 “前进” 或 “后退” 按钮时，浏览器就会触发 popstate 事件，并通过该事件传递到 JavaScript 中的状态对象。这样，通过监听该事件对象，我们就可以在浏览器中实现前端路由。

优缺点
优点：History 模式的 URL 更加美观，用户体验更加友好。同时，由于完整的 URL 可以被搜索引擎识别，因此更加便于 SEO。

缺点：由于 History 模式需要浏览器支持 HTML5 的 History API，因此在老版本的浏览器中可能无法正常运行。在没有特殊配置的情况下，在后端服务器上的 URL 不正确时，将会返回 404 错误，这需要特殊的服务器配置以支持 History 模式。

popState ， pushState 和 replaceState 应用

当使用 History API 进行前端路由时，可以使用以下三个方法来管理浏览器历史记录和 URL：

popState 方法

popState 方法用于监听页面历史记录的变化，当用户点击浏览器的 “前进” 或 “后退” 按钮时，会触发该方法。

window.addEventListener('popstate', function(event) {
  // 历史记录发生变化时的处理逻辑
  // event.state 可以获取当前历史记录的状态对象
});

这个方法将触发一个 popstate 事件，并提供了 event.state 属性，可以使用该对象来获取当前历史记录的状态。

pushState 方法

pushState 方法用于向浏览器的历史记录中添加一个新的状态，并且不会引起页面的刷新。

history.pushState(state, title, url);

state：需要保存到历史记录的状态对象。
title：网页的标题，目前大多数浏览器都不会显示这个参数。
url：要添加的新的 URL 地址。
这个方法可以在不刷新页面的情况下修改浏览器的 URL，并向历史记录添加一个新的状态。

replaceState 方法

replaceState 方法用于替换当前历史记录中的状态，而不会创建一个新的历史记录。

history.replaceState(state, title, url);

state：需要保存到历史记录的新状态对象。
title：网页的标题，目前大多数浏览器都不会显示这个参数。
url：要替换的新的 URL 地址。
这个方法将当前历史记录中的状态替换为新的状态，而不会创建一个新的历史记录条目。页面的 URL 也将被替换为新的 URL。

这些 History API 方法使得开发者能够在前端实现路由切换和历史记录管理，并且能够在不刷新整个页面的情况下，根据需要修改浏览器 URL 和历史记录的状态。这样可以增强用户体验，实现单页应用（SPA）的路由功能。

pushState和replaceState的用法

在 JavaScript 中，可以使用history.pushState()和history.replaceState()方法来更改浏览器的 URL，以及使用window.onpopstate事件来监听 URL 的变化。下面是一个示例代码：

// 更改 URL，并添加新的历史记录
history.pushState({page: 1}, "Page 1", "/page1");

// 替换当前的 URL，不会添加新的历史记录
history.replaceState({page: 2}, "Page 2", "/page2");

// 监听 URL 的变化
window.onpopstate = function(event) {
  console.log("URL changed to: " + location.pathname);
  console.log("State data: ", event.state);
};

在这个示例中，history.pushState()方法会将 URL 更改为/page1，并添加一个新的历史记录。而history.replaceState()方法会替换当前的 URL 为/page2，不会添加新的历史记录。

当用户点击浏览器的前进或后退按钮时，window.onpopstate事件会被触发，可以通过location.pathname获取当前 URL，并通过event.state获取与之前的历史记录相关的状态数据。

需要注意的是，使用history.pushState()和history.replaceState()方法更改 URL，并不会触发页面的刷新或加载新的资源，而是仅仅更改了浏览器地址栏的 URL。如果我们想要根据 URL 的变化来更新页面内容，可以结合使用window.onpopstate事件和前端路由库（如React Router、Vue Router）来实现。

<!DOCTYPE html>
<html>
<head>
  <title>History API Example</title>
  <script>
    window.onload = function() {
      // 添加新的历史记录，并改变 URL
      function pushStateExample() {
        var state = {page: 1};
        var title = "Page 1";
        var url = "/page1";
        history.pushState(state, title, url);

        console.log("Pushed state:", state);
      }

      // 替换当前历史记录，并改变 URL
      function replaceStateExample() {
        var state = {page: 2};
        var title = "Page 2";
        var url = "/page2";
        history.replaceState(state, title, url);

        console.log("Replaced state:", state);
      }

      // 监听 URL 的变化
      window.onpopstate = function(event) {
        console.log("URL changed to:", location.pathname);
        console.log("State data:", event.state);
      }

      // 修改 URL 并添加新的历史记录
      document.getElementById("pushBtn").addEventListener("click", pushStateExample);

      // 替换当前的 URL
      document.getElementById("replaceBtn").addEventListener("click", replaceStateExample);
    };
  </script>
</head>
<body>
  <h1>History API Example</h1>
  <button id="pushBtn">Push State</button>
  <button id="replaceBtn">Replace State</button>
</body>
</html>