在前端开发中，有时候需要通过JavaScript动态地更新网址的URL或者查询参数，这样可以实现更好的用户体验和更多的交互性。本文将介绍如何使用JavaScript动态地更新URL或查询字符串，而不会导致页面重新加载。
更新URL
window.history.pushState()
window.history.pushState() 方法可以用于在同一文档内部修改当前页面的 URL，并且不会导致页面重新加载。此方法接受三个参数：
state: 一个与新历史记录条目相关联的状态对象，可以是任何可序列化的JavaScript对象。title: 新页面的标题，但是大多数浏览器都忽略这个参数。url: 新的URL地址，必须与当前URL同源。
示例代码：
----- -------- - - ---- ----- -- ----- ----- - ---- ---- ------- ----- ------ - ----------- ---------------------------------- ------ --------
使用上述代码执行后，浏览器的地址栏将显示为 /new-url，但是页面并不会重新加载。当然，这个操作还可以撤销，只需调用 window.history.back() 即可回到之前的页面。
window.location.replace()
window.location.replace() 方法可以用于替换当前页面的 URL，并且不会产生历史记录。这意味着用户点击浏览器的“后退”按钮时，将不会回到这个替换前的页面。此方法接受一个参数：新的URL地址。
示例代码：
----- ------ - ----------- --------------------------------
使用上述代码执行后，浏览器的地址栏将显示为 /new-url，并且页面也会跳转到这个新的URL。但是，用户点击浏览器的“后退”按钮时，将无法返回到之前的页面。
更新查询字符串
URLSearchParams
URLSearchParams 对象可以用于解析和操作URL中的查询字符串。我们可以通过 URLSearchParams.get()、URLSearchParams.set() 等方法来获取或设置查询参数的值，而不需要重新加载页面。
示例代码：
-- -------------- ----- ------------ - --- ---------------------------------------- -- ---------- ----- ---------- - ------------------------------ -- ---------- ----------------------------- ------------ -- ---------- ------------------------------ ----- --- - -------------------------
使用上述代码执行后，如果当前URL中存在名为 paramName 的查询参数，则其值将被更新为 newValue，同时浏览器地址栏的URL也会相应地更新。如果不存在名为 paramName 的查询参数，则会添加一个新的查询参数。
总的来说，我们可以使用上述方法动态地更新URL或查询字符串，而不会导致页面重新加载，这对于提升用户体验和增加交互性非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/13309