如何修改window.location路径不触发页面跳转？附在线商店实例

API 探路者

2026-8-6

实现修改URL查询参数不触发页面跳转

直接修改window.location相关属性会触发浏览器重定向，要实现仅更新URL而不跳转，需要使用浏览器的History API，具体用history.pushState()或history.replaceState()方法。

核心实现步骤

1. 构建新的查询参数

先通过URLSearchParams处理现有查询参数，添加/修改需要的筛选条件：

// 获取当前URL的查询参数
const params = new URLSearchParams(window.location.search);

// 修改参数：比如添加分类、品牌、价格区间
params.set('category', 'smartphones');
params.set('brand', 'apple');
params.set('price', '90–899');

// 生成新的查询字符串
const newSearch = params.toString();

2. 更新URL而不跳转

用pushState()添加新历史记录（支持后退到之前的URL）：

history.pushState({}, '', `${window.location.pathname}?${newSearch}`);

用replaceState()替换当前历史记录（不保留之前的URL状态）：

history.replaceState({}, '', `${window.location.pathname}?${newSearch}`);

同步页面状态（可选但重要）

当用户点击浏览器的后退/前进按钮时，URL会变化但页面不会自动更新，需要监听popstate事件来同步筛选状态：

window.addEventListener('popstate', () => {
  // 根据当前URL的查询参数重新渲染页面内容
  const currentParams = new URLSearchParams(window.location.search);
  const category = currentParams.get('category');
  const brand = currentParams.get('brand');
  const priceRange = currentParams.get('price');
  // 执行筛选逻辑，更新页面内容
});