如何在JS中实现修改URL参数而不刷新页面

在JavaScript中，可以通过修改window.history.pushState和window.history.replaceState方法来实现不刷新页面的URL参数修改。

以下是一个简单的例子，展示如何使用pushState添加一个新的参数到当前URL中，而不刷新页面：

// 假设我们要修改URL添加一个新的查询参数key=value
function updateQueryParam(key, value) {
    var newUrl = new URL(window.location.href);
    newUrl.searchParams.set(key, value);
    window.history.pushState({ path: newUrl.href }, '', newUrl.href);
}
 
// 使用例子
updateQueryParam('example', '123');

如果你想替换当前URL中的参数，可以使用replaceState：

// 假设我们要修改URL替换查询参数key=newValue
function replaceQueryParam(key, newValue) {
    var newUrl = new URL(window.location.href);
    newUrl.searchParams.set(key, newValue);
    window.history.replaceState({ path: newUrl.href }, '', newUrl.href);
}
 
// 使用例子
replaceQueryParam('example', '456');

这两个函数都不会导致页面刷新，可以在不需要刷新页面的前端应用中使用。