在前端开发中，使用锚点可以让用户在页面内部快速跳转到指定的位置。而通过更改 window.location.hash 属性，我们还可以实现无需刷新页面就能改变 URL 地址的效果。但是，当用户点击浏览器的前进或后退按钮时，页面并不会像预期那样回到历史记录中的先前状态。因此，我们需要在 JavaScript 中对 hash 值的变化进行监听，并手动维护历史记录。
监听 hash 变化事件
要监听 hash 值的变化，我们需要使用 window.onhashchange 事件。这个事件会在 URL 的 hash 值改变时触发，并传入一个包含新 hash 值和旧 hash 值的 HashChangeEvent 对象。例如：
window.addEventListener('hashchange', function (event) {
console.log('Old hash:', event.oldURL);
console.log('New hash:', event.newURL);
});在这个示例代码中，我们使用 addEventListener 方法来添加一个监听器，然后在回调函数中分别打印出旧的和新的 hash 值。
维护历史记录
当用户通过点击前进或后退按钮来浏览历史记录时，我们需要将当前的 hash 值添加到浏览器的历史记录中，以便用户可以返回先前的状态。为了实现这个功能，我们可以使用 history.pushState() 方法。这个方法可以向浏览器的历史记录栈中添加一条新记录，并且不会刷新页面。例如：
history.pushState(null, null, '#new-hash');
在这个示例代码中，我们使用 pushState 方法来添加一个新的历史记录，同时将当前的 hash 值设置为 #new-hash。这样，当用户点击后退按钮时，页面就会回到之前的状态。
完整示例代码
下面是一个完整的示例代码，演示如何监听 hash 变化事件并维护历史记录：
-- -------------------- ---- -------
--------- -----
------
------
-------------- ------- -- ----------- ------- -- ------------------
-------
------
--- ---------------------- ------
-------- ----- ----- --- ----- ----------- ---------- ---------
--- ---------------------- ------
----------- ---- ------ --- ---- ------- --------------
--- ---------------------- ------
-------- --------- ------------ -------- ----- --------- -------- -- ----- -- --------- ----- -- ------ ------------
--------
-- -- ---- ----
------------------------------------- -------- ------- -
---------------- ------- --------------
---------------- ------- --------------
-- ------
-- ------------------------------------- -
----------------------- ----- --------------
- ---- -- ------------------------------------- -
----------------------- ----- --------------
- ---- -- ------------------------------------- -
----------------------- ----- --------------
-
---
---------
-------
-------在这个示例代码中，我们创建了三个锚点，并且使用 window.addEventListener 方法监听 hash 变化事件。在回调函数中，我们打印出旧的和新的 hash 值，并根据新的 hash 值维护历史记录。
总结
通过监听 hash 变化事件和手动维护历史记录，我们可以实现无需刷新页面就能改变 URL 地址的效果，并使浏览器的前进和后退按钮按照预期工作。这个技
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30176