JS/JavaScript修改浏览器URL参数且不刷新页面

简介

使用 JavaScript 改变 URL 参数值并且页面不刷新的方法有两种模式：

• 使用 History replaceState
• 使用 History pushState

使用 History replaceState 

// 获取当前 URL 的参数
let searchParams = new URLSearchParams(window.location.search);
// 修改参数值
searchParams.set('paramName', 'paramValue');
const newBrowserUrl = new URL(window.location);
newBrowserUrl.search = searchParams.toString();
// 创建一个新的 URL，替换当前的 URL 但不刷新页面
window.history.replaceState({}, '', newBrowserUrl.toString());

使用 History pushState （推荐）

const browserUrlParams = new URLSearchParams(window.location.search);
browserUrlParams.set('projectId',params.projectId);
browserUrlParams.set('groupId',params.groupId);

const newBrowserUrl = new URL(window.location);
newBrowserUrl.search = browserUrlParams.toString();
history.pushState({}, '', newBrowserUrl);

区别

history.replaceState() 的使用与 history.pushState() 非常相似，区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个。

JavaScript URLSearchParams pushState replaceState

https://blog.xqlee.com/article/2504111445071884.html