jQuery-hashchange 是一个基于 jQuery 的插件，可以帮助我们监听浏览器 URL hash 值的变化，并执行相关操作。在前端开发中，我们经常需要使用这个功能来实现单页面应用（SPA）或者路由切换等场景。本文将介绍如何使用 npm 包 jquery-hashchange 来实现 URL hash 值的监听和变化。
安装
首先，我们需要使用 npm 安装 jquery-hashchange：
npm install jquery-hashchange --save
安装完成后，在代码中引入该包：
import $ from 'jquery'; import 'jquery-hashchange';
监听 URL hash 变化
使用 jquery-hashchange 监听 URL hash 变化非常简单。我们只需要调用 $(window).hashchange() 方法即可：
$(window).hashchange(function() {
console.log('URL hash has been changed');
});上面的代码会在 URL hash 变化时输出一条日志信息。如果我们需要监听特定的 hash 值，可以在回调函数中获取当前的 hash 值：
$(window).hashchange(function() {
const currentHash = location.hash;
console.log(`Current hash is ${currentHash}`);
});改变 URL hash 值
除了监听 URL hash 值的变化，我们还可以使用 jquery-hashchange 来改变 URL hash 值。我们可以使用 $.hashchange 方法来改变 URL hash 值，例如：
$.hashchange(`#newHashValue`);
上面的代码会将 URL hash 值改变为 #newHashValue。同时，我们也可以在 URL 中添加参数：
$.hashchange(`#page=2&sort=name`);
示例
下面是一个完整的示例代码，演示了如何使用 jquery-hashchange 监听 URL hash 变化和改变 URL hash 值：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ---------- ---------------
------- -----------------------------------------------------------
------- ----------------------------------------------------------------------------------------
-------
------
---------- ---------- ------------
----
------ ------------------- ----------
------ ------------------- ----------
------ ------------------- ----------
-----
---- -------------------
--------
------------------------------- -
----- ----------- - --------------
-------------------- ---- -- -----------------
-- ------ ------- ----- -- ---- -----
-- ------------ --- ---------- -
------------------------ -- ---- ----
- ---- -- ------------ --- ---------- -
------------------------ -- ---- ----
- ---- -- ------------ --- ---------- -
------------------------ -- ---- ----
-
---
-- ------ ---- ----- ---- -------- -----
------------------------ -
-------------------
----- ---- - ---------------------
-------------------
---
---------
-------
-------该示例代码包含了一个带有三个链接的列表以及一个内容区域。当用户点击某个链接时，URL hash 值会发生变化，并且根据 hash 值的不同，内容区域会显示不同的内容。同时，我们也可以直接改变 URL hash 值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35184