在 Web 开发中，有时需要更新页面 URL，但又不想让用户看到页面的刷新。例如，在单页应用程序中，我们可能希望更新 URL 以反映当前视图状态，但不希望重新加载整个应用程序。
那么，如何实现在不刷新页面的情况下动态更改 URL 呢？以下是一些常见的方法：
1. 使用 HTML5 的 History API
HTML5 的 History API 允许您直接操作浏览器历史记录。它提供了以下方法来更改当前 URL：
- pushState(state, title, url)：将新的状态和 URL 添加到浏览器历史记录中。
- replaceState(state, title, url)：替换当前状态和 URL。
这些方法不会导致页面重新加载，但会生成一个新的历史记录条目。例如，以下代码将使用 pushState() 方法在不刷新页面的情况下更改 URL：
const stateObj = { foo: "bar" };
const pageTitle = "New Page Title";
const newUrl = "/new-url";
window.history.pushState(stateObj, pageTitle, newUrl);要注意的是，这种方法只会更改浏览器地址栏中的 URL，而不会更新网页内容。因此，如果您希望在 URL 更改时更新页面，请确保相应地处理 popstate 事件（详见下文）。
2. 监听 popstate 事件
当浏览器的历史记录条目发生更改时，会触发 popstate 事件。可以使用该事件来监听 URL 更改并更新页面内容。
例如，以下代码显示了如何在单页应用程序中使用 History API 和 popstate 事件来更新视图状态：
-- -------------------- ---- -------
-- ------- --- --------
----- ------ - -
---- ------------
--------- -------------
----------- --------------
--
-- -- -------- --
----------------------------------- -- -- -
-- ---- --- ----------
----- ---------- - -------------------------
----- ------- - -------------------
-- --------- -
-- --------------
----------
-
---
-- ----------
---------------------------------- ------- -- -
-- --------------------- --- ---- -
-- --------------------- ---
-----------------------
-- ----- ---- --
----- ---- - ----------------------------------
-- -- ------- --- -- -------------------
---------------------------- --- ------
----- ------- - -------------
----------
-
---3. 使用哈希（Hash）符号
如果您只需要在 URL 中添加一个标识符来表示视图状态，并且不需要与服务器交互，则可以使用哈希符号。哈希符号后面的内容不会被发送到服务器，它只是在客户端之间共享。
例如，以下代码演示了如何使用哈希符号来更改 URL：
-- -------------------- ---- -------
-- ----------
---------------------------------- ------- -- -
-- --------------------- --- ---- -
-- --------------------- ---
-----------------------
-- ----- ---- --
----- ---- - ----------------------------------
-- -------- ---
-------------------- - -----
-
---
-- -- ---------- --
------------------------------------- -- -- -
-- ------------------------
----- ----------- - ---------------------
----- ------- - --------------------
-- --------- -
----------
-
---虽然这种方法比 History
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31109