在前端开发中，我们经常需要动态更改网页的 URL。但是，直接更改 URL 可能会导致浏览器历史记录被修改，这可能会对用户的浏览体验造成负面影响。那么，有没有一种方式可以更改 URL，同时不会影响浏览器的历史记录呢？
使用 HTML5 的 History API
HTML5 提供了一个用于管理浏览器历史记录的 API，即 History API。通过使用 History API 中的 pushState 和 replaceState 方法，我们可以更改 URL，同时不会影响浏览器历史记录。
pushState 方法
pushState 方法可以将当前 URL 推入浏览器历史记录栈，并且修改当前 URL。
history.pushState(state, title, url);
state: 一个与指定网址相关联的状态对象，可以通过window.history.state获取。title: 新页面的标题，但目前所有浏览器都忽略这个参数。url: 新的网址，必须与当前页面所在域相同，否则会抛出异常。
以下是一个例子：
const state = { page: "home" };
const title = "Home Page";
const url = "/home";
history.pushState(state, title, url);上述代码将浏览器的当前 URL 修改为 /home，并将 state 对象和 title 设置为相应的值。
replaceState 方法
replaceState 方法可以修改当前 URL，但不会像 pushState 方法那样将其推入浏览器历史记录栈。
history.replaceState(state, title, url);
state: 一个与指定网址相关联的状态对象，可以通过window.history.state获取。title: 新页面的标题，但目前所有浏览器都忽略这个参数。url: 新的网址，必须与当前页面所在域相同，否则会抛出异常。
以下是一个例子：
const state = { page: "about" };
const title = "About Page";
const url = "/about";
history.replaceState(state, title, url);上述代码将浏览器的当前 URL 修改为 /about，并将 state 对象和 title 设置为相应的值。
如何使用 History API
使用 History API 的基本流程如下：
- 监听用户操作，例如点击链接或按钮等。
- 使用
pushState或replaceState方法更改 URL。 - 响应 URL 的变化，例如更新页面内容或调用特定功能。
以下是一个示例代码：
-- -------------------- ---- -------
--------- -----
------
------
-------------- --- ---------------
-------
------
------- -----------------------
------- -------------------------
---- -------------
---- ------ ---
------
--------
----- ------- - -----------------------------------
----- ------- - --------------------------------
----- -------- - ---------------------------------
-- ------
--------------------------------- -- -- -
------------------- ----- ------ -- ----- ------ ---------
----------------
---
---------------------------------- -- -- -
------------------- ----- ------- -- ------ ------ ----------
----------------
---
-- -- --- ---
----------------------------------- -- -- -
----------------
---
-------- --------------- -
-- -- --- ----------
----- ---- - -------------------------
-- ----- --- -------- -
----------------- - ------------ -- ---- -----------
- ---- -- ----- --- --------- -
----------------- - ---------- ------------ --- - ---- -- -----------------
- ---- -
----------------- -
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------