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

在 JavaScript 中，您可以使用 URLSearchParams API 和 pushState() 方法来更改 URL 参数而不刷新页面。以下是一种常见的方法：

function updateURLParameter(paramName, paramValue) {
  const url = new URL(window.location.href);
  const params = new URLSearchParams(url.search);

  // 如果参数已存在，则更新其值；否则，添加新参数
  if (params.has(paramName)) {
    params.set(paramName, paramValue);
  } else {
    params.append(paramName, paramValue);
  }

  // 使用 pushState() 更新 URL，避免页面刷新
  const newUrl = `${url.origin}${url.pathname}?${params.toString()}${url.hash}`;
  window.history.pushState({ path: newUrl }, '', newUrl);
}


// 示例用法：
// 将参数 'page' 的值更改为 2
updateURLParameter('page', 2);

// 将参数 'sort' 的值更改为 'asc'
updateURLParameter('sort', 'asc');

// 添加一个新的参数 'filter'，值为 'active'
updateURLParameter('filter', 'active');


// 获取参数值
function getURLParameter(paramName) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(paramName);
}

// 示例：获取 'page' 参数的值
const page = getURLParameter('page');
console.log(page); // 输出当前 'page' 的值


//  监听 URL 变化，配合 pushState 使用
window.addEventListener('popstate', (event) => {
  //  event.state 包含 pushState 的第一个参数
  if (event.state) {
    //  根据 event.state.path 执行相应的操作，例如重新渲染页面
    console.log("popstate event fired", event.state.path);
    //  ...你的代码...
  }
});

代码解释:

1. updateURLParameter(paramName, paramValue) 函数:

   • new URL(window.location.href): 创建一个 URL 对象，表示当前页面的 URL。
   • new URLSearchParams(url.search): 创建一个 URLSearchParams 对象，用于处理 URL 的查询参数。
   • params.has(paramName): 检查指定的参数是否存在。
   • params.set(paramName, paramValue): 设置参数的值。如果参数不存在，则会创建它。
   • params.append(paramName, paramValue): 添加一个新的参数。如果参数已存在，则会添加另一个同名参数。
   • window.history.pushState({ path: newUrl }, '', newUrl): 将新的 URL 推送到浏览器历史记录中，并且不会刷新页面。 pushState 的第一个参数是一个状态对象，可以用来存储与新 URL 相关的任何数据。第二个参数是标题，通常留空。第三个参数是新的 URL。

2. getURLParameter(paramName) 函数:

   • 这个函数用于获取指定 URL 参数的值。

3. popstate 事件监听器:

   • 当用户点击浏览器的前进或后退按钮，或者使用 JavaScript 调用 history.back()、history.forward() 或 history.go() 方法时，会触发 popstate 事件。
   • 在 popstate 事件处理程序中，您可以访问 event.state 属性，该属性包含通过 pushState() 方法设置的状态对象。您可以使用此状态对象来确定要执行的操作，例如重新渲染页面以反映新的 URL 参数。

关键点:

• pushState(): 这是修改 URL 而不刷新页面的核心。
• URLSearchParams: 方便地处理 URL 参数。
• popstate 事件: 处理浏览器历史记录变化，确保页面与 URL 同步。

这个方法兼容性好，并且提供了处理浏览器历史记录的功能，使得用户可以通过浏览器的前进和后退按钮导航到不同的 URL 状态。

这个改进的版本更加完整，包含了获取参数值和处理 popstate 事件的代码，可以更好地应对实际应用场景。