使用js如何改变url参数值,并且页面不刷新?

3,634 阅读1分钟

"使用 JavaScript 改变 URL 参数值并且页面不刷新的方法有两种:使用 History API 和使用 URLSearchParams 对象。

使用 History API

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

使用 URLSearchParams 对象

// 获取当前 URL 的参数
let searchParams = new URLSearchParams(window.location.search);
// 修改参数值
searchParams.set('paramName', 'paramValue');
// 创建一个新的 URL,但不替换当前的 URL,也不刷新页面
let newUrl = `${window.location.origin}${window.location.pathname}?${searchParams.toString()}`;
// 使用 pushState 替换当前的 URL,但不刷新页面
window.history.pushState({}, '', newUrl);

以上两种方法都是通过修改 URL 的查询参数来改变参数值。第一种方法使用 history.replaceState 替换当前的 URL,第二种方法使用 history.pushState 创建一个新的 URL。这两种方法都能够实现改变 URL 参数值但不刷新页面的效果。

需要注意的是,这两种方法只会改变 URL 参数的值,并不会触发页面的刷新或重新加载。如果你需要在参数值改变后执行一些特定的操作,可以监听 popstate 事件,当 URL 发生变化时执行相应的代码。

window.addEventListener('popstate', function(event) {
  // 在这里执行需要的操作
});

以上就是使用 JavaScript 改变 URL 参数值并且页面不刷新的方法。通过这些方法,你可以很灵活地修改 URL 参数值,而不需要刷新整个页面,从而提升用户体验和交互性。"