js直接实现

实现方式

在JavaScript中，可以通过window.location对象或history.pushState方法直接修改URL而不刷新页面。以下是几种常见场景的代码示例：

修改URL参数（不刷新页面）

// 使用history.pushState
history.pushState({}, '', '/new-path?param=value');

// 使用replaceState替换当前记录
history.replaceState({}, '', window.location.pathname + '?param=value');

获取当前URL参数

const urlParams = new URLSearchParams(window.location.search);
const paramValue = urlParams.get('param');

监听URL变化

window.addEventListener('popstate', (event) => {
  console.log('URL changed:', window.location.href);
});

注意事项

• pushState和replaceState不会触发popstate事件，需手动处理UI更新
• 修改后的URL需符合同源策略，否则会抛出安全错误
• 参数变化时建议同步更新页面内容，避免状态不一致

兼容性方案

对于旧版浏览器，可通过以下方式回退：

if (!window.history.pushState) {
  // 降级方案：通过location.hash或整页刷新
  window.location.hash = 'new-state';
}