【 HTML 及浏览器】Hash 与 History 之争

fans小知

于 2024-03-06 08:45:00 发布

阅读量866

点赞数 23

分类专栏： # 题达巅峰文章标签： html 哈希算法前端

本文链接：https://blog.csdn.net/weixin_42132860/article/details/136445109

版权

14 篇文章 0 订阅

订阅专栏

前端路由：Hash与History之争

当今的单页面应用（Single Page Application，简称SPA）在提供丝滑般用户体验的同时，也带来了前端路由管理的挑战。前端路由的核心在于，在不重新加载整个页面的情况下，能够更新视图与同步URL。这里，我们将深入探讨前端路由的两大模式：Hash模式与History模式。

Hash模式是前端路由的老将，它的工作原理围绕URL的hash值——即#符号后面的全部内容。

当你访问：

http://yourapp.com/#/user

浏览器实际访问的是：

http://yourapp.com/

同时，浏览器会记录hash值：

#/user

任何hash的改变都不会引起页面的刷新，但会触发hashchange事件，前端路由依据这个事件来同步页面的内容。

通过监听hashchange事件来响应URL的变化：

window.addEventListener('hashchange', () => {
  const hash = window.location.hash;
  renderPage(hash);
});

History模式则是利用HTML5的History API——特别是pushState和replaceState方法——来实现前端路由。

History API允许你操作浏览器的会话历史（session history），这意味着你可以修改URL而不刷新页面。

通过history.pushState方法来改变URL而不引起页面刷新：

History.pushState()
该方法用于在历史中添加一条记录。pushState()方法不会触发页面刷新，只是导致 History 对象发生变化，地址栏会有变化。

语法：history.pushState(object, title, url)

该方法接受三个参数，依次为：

history.pushState(null, null, 'user');

同时，通过监听popstate事件来响应URL的变化：

window.addEventListener('popstate', () => {
  renderPage(window.location.pathname);
});

Hash模式与History模式各有千秋。Hash模式的兼容性和简易性使它在不需要服务器动作、且对URL美观度要求不高的场景下依然流行。而History模式则因其提供的无hash URL和依赖HTML5 History API的现代化特性，在现代Web应用中得到了广泛应用。

在选择路由模式时，开发者应该根据应用的需要、用户的目标、SEO要求以及服务器的配置能力来做出决策。一方面，History模式提供了更加友好的URL和更大的灵活性，但需要确保服务器端的支持；另一方面，Hash模式凭借其简单与高兼容性，仍旧适用于许多不需要服务器渲染的简单应用。

最后，无论选择哪种模式，核心目的都是为了提升用户体验，确保用户可以通过直观、可靠的URL进行导航，同时，开发者可以维护和管理前端路由的状态。

关注