JS之变更URL的传参但不刷新页面

需求：变更URL的传参但不刷新页面

代码如下：

// 解析URL参数为对象
function getUrlParams() {
  const params = {};
  const search = window.location.search.substring(1);
  if (search) {
    search.split('&').forEach(pair => {
      const [key, value] = pair.split('=');
      if (key) {
        params[key] = decodeURIComponent(value || '');
      }
    });
  }
  return params;
}

// 将参数对象转换为URL查询字符串
function paramsToQueryString(params) {
  const pairs = [];
  for (const key in params) {
    if (params.hasOwnProperty(key) && params[key] !== undefined) {
      pairs.push(`${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`);
    }
  }
  return pairs.length ? `?${pairs.join('&')}` : '';
}

// 更新URL参数（保留历史记录）
function updateUrlParams(newParams, shouldReplace = false) {
  // 获取当前参数
  const currentParams = getUrlParams();
  
  // 合并新参数到当前参数
  const updatedParams = { ...currentParams, ...newParams };
  
  // 构建新的URL
  const newUrl = `${window.location.pathname}${paramsToQueryString(updatedParams)}${window.location.hash}`;
  
  // 更新URL而不刷新页面
  if (shouldReplace) {
    // 替换当前历史记录
    window.history.replaceState(updatedParams, '', newUrl);
  } else {
    // 添加新的历史记录
    window.history.pushState(updatedParams, '', newUrl);
  }
  
  return updatedParams;
}

// 示例用法
// 添加或修改参数，保留历史记录
updateUrlParams({ page: '2', sort: 'price' });

// 替换参数，不保留历史记录
updateUrlParams({ filter: 'active' }, true);

// 移除参数（设置为undefined）
updateUrlParams({ sort: undefined });

// 监听历史记录变化
window.addEventListener('popstate', (event) => {
  console.log('URL参数变化:', event.state);
  // 在这里可以根据新的参数更新页面内容
});

这种方法非常适合单页应用 (SPA)，可以在不刷新页面的情况下更新 URL 状态，同时保持浏览器的前进 / 后退功能正常工作。

使用 popstate 事件监听用户通过后退 / 前进按钮导致的 URL 变化