jquery.address 是一个 JavaScript 库，它提供了一种简单的方式来管理浏览器地址栏的状态。在前端开发中，我们经常需要根据 URL 参数来渲染页面的内容或者处理用户行为，而使用 jquery.address 可以让这一过程变得更加简便。
安装和引入
首先安装 jquery.address，可以使用 npm 命令：
npm install jquery.address
然后，在需要使用该库的文件中引入 jquery.address：
import $ from 'jquery'; import 'jquery.address';
基本用法
jquery.address 提供了几个常用的方法，例如：$.address.value()、$.address.parameter()、$.address.path() 等等。下面分别介绍其用法：
$.address.value()
获取当前浏览器地址栏的值，返回一个字符串。
console.log($.address.value()); // "http://localhost:3000/#/about"
$.address.parameter(name)
获取指定名称的 URL 参数，返回一个字符串。
console.log($.address.parameter('id')); // "123"$.address.path()
获取当前 URL 的路径部分，返回一个字符串。
console.log($.address.path()); // "/about"
$.address.change(fn)
当浏览器地址栏的值改变时，执行回调函数。
$.address.change(function() {
console.log('Address changed to: ' + $.address.value());
});高级用法
jquery.address 还提供了一些高级的功能，例如：修改 URL，在不刷新页面的情况下改变地址栏的值，以及使用 HTML5 History API 等。
修改 URL
使用 $.address.value(value) 方法可以修改浏览器地址栏中的值。这个方法会自动更新浏览器的历史记录，不会刷新页面。
$.address.value('/about');改变 URL 参数
使用 $.address.parameter(name, value) 方法可以修改 URL 参数的值。同样地，这个方法也会自动更新地址栏和浏览器历史记录，不会刷新页面。
$.address.parameter('id', '456');使用 HTML5 History API
如果浏览器支持 HTML5 History API，jquery.address 就会自动使用它来管理地址栏状态。这意味着，我们可以使用 pushState 和 replaceState 方法来更改浏览器地址栏中的值，而不需要像上面那样使用 jquery.address 的方法。
history.pushState(null, null, '/about');
示例代码
下面是一个简单的示例，展示了如何使用 jquery.address 来获取和修改浏览器地址栏的状态：
-- -------------------- ---- -------
--------- -----
------
------
--------------------- ------------
-------
------
--------- -----------
------- -- - ---- -- -------------------
------- -----------------------------------------------------------
------- -----------------------------------------------------------------------------------------------
--------
------------ -
-- -- --- --
----- -- - --------------------------
-- ---- -
--------------- --- - - ----
-
-- -- --- --
---------------------------- -
------------------------- ---------------
---
-- -------
--------------------------- -
-------------------- ------- --- - - -------------------
---
---
---------
-------------- -----------
-------
-------以上代码展示了如何获取 URL 参数、修改 URL 参数，以及监听地址栏变化。点击按钮后，URL 参数的值会随机改变，并且在控制台中输出地址栏的值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35677