如何在JavaScript中检测不含#符号的URL变化？

嘿，这个场景我在做原生单页应用的时候太熟悉了！window.onhashchange确实只能处理带哈希（#）的URL变化，而你现在用的是HTML5 History API实现的路径式路由（比如/myURL/oneOption到/myURL/secondOption这种），得用下面两种结合的方式来监听：

1. 监听浏览器原生的popstate事件 #

这个事件会在用户点击浏览器的前进/后退按钮，或者通过代码调用history.back()、history.forward()、history.go()时触发，能捕获到URL的变化：

window.addEventListener('popstate', (event) => {
  console.log('URL已更新:', window.location.href);
  // 在这里写你的URL变化处理逻辑，比如切换页面内容
});

不过要注意：手动调用history.pushState()或者history.replaceState()的时候，不会自动触发popstate事件，所以我们需要做第二步的封装。

2. 重写History API方法，触发自定义事件 #

为了覆盖代码中主动修改URL的场景，我们可以重写pushState和replaceState方法，在调用原生方法后手动触发一个自定义事件：

// 先保存原生的History方法，避免覆盖后丢失功能
const originalPushState = history.pushState;
const originalReplaceState = history.replaceState;

// 重写pushState
history.pushState = function(...args) {
  originalPushState.apply(this, args);
  // 触发自定义的路由变化事件
  window.dispatchEvent(new Event('routechange'));
};

// 重写replaceState
history.replaceState = function(...args) {
  originalReplaceState.apply(this, args);
  window.dispatchEvent(new Event('routechange'));
};

// 监听自定义的routechange事件，处理所有URL变化场景
window.addEventListener('routechange', () => {
  console.log('路由已切换:', window.location.pathname);
  // 执行你的业务逻辑，比如根据新路径加载对应组件
});

额外说明 #

• 如果你的页面是服务器端渲染（每次URL变化都会刷新整个页面），那其实不需要监听事件——直接在页面加载时读取window.location.pathname处理即可。
• 上面的方案能覆盖所有前端路由变化的场景：用户手动导航、代码主动修改URL都能检测到。

内容的提问来源于stack exchange，提问作者Mr.Z