是否存在可靠方法可拦截SPA网站的页面路由变更？

你提到的「代理 window.history 方法 + 监听 hashchange 事件」的方案是目前不受前端框架限制的、检测SPA路由变更最通用可靠的实现思路，只要补全原参考实现的几个遗漏点，即可满足需求。

原参考实现的缺陷 #

你提供的Proxy版本的实现存在几个会导致功能异常的问题：

• 调用history原生方法时没有绑定this指向，也没有透传调用参数，会导致原生的pushState/replaceState等方法执行异常，路由跳转本身失效
• 没有覆盖popstate事件的监听：用户点击浏览器前进/后退按钮、或者调用history.go()时触发的路由变更没有被捕获
• 没有补充hashchange事件的监听，无法覆盖hash路由模式的SPA场景

修正后的完整实现 #

// 备份原生history方法
const originalHistory = window.history;
const originalPushState = originalHistory.pushState;
const originalReplaceState = originalHistory.replaceState;

// 补丁pushState和replaceState
window.history.pushState = function(...args) {
  const result = originalPushState.apply(this, args);
  window.dispatchEvent(new CustomEvent('routechange'));
  return result;
};

window.history.replaceState = function(...args) {
  const result = originalReplaceState.apply(this, args);
  window.dispatchEvent(new CustomEvent('routechange'));
  return result;
};

// 监听前进后退、go方法触发的popstate事件
window.addEventListener('popstate', () => {
  window.dispatchEvent(new CustomEvent('routechange'));
});

// 监听hash路由变更
window.addEventListener('hashchange', () => {
  window.dispatchEvent(new CustomEvent('routechange'));
});

注：也可以用Proxy方式实现，只要确保this绑定和参数透传即可，上面的直接补丁写法兼容性比Proxy更好，支持更低版本的浏览器

方案覆盖范围 #

这个实现可以覆盖几乎所有SPA路由场景：

• 所有前端框架（React/Vue/Angular/Svelte等）的history路由和hash路由
• 原生JS手写的SPA路由
• 浏览器前进后退、地址栏手动输入路由触发的变更

仅有的极端冲突场景是页面本身已经重写了history相关方法，这种情况属于极少数特殊场景，通用方案无需额外兼容。

内容的提问来源于stack exchange，提问作者David Alsh