魔改一些前端页面的时候发现,一些打包好的 React、Vue 项目,如果路由使用的是 hash 路由,无论是 a 标签跳转还是 history.push 跳转的方式,都不会调用 window.onhashchange 事件。就连 window.onpopstate 事件也不调用。

后来查相关资料,说是

当使用 history.pushState() 或 history.replaceState() 时,当前的 location 会变化,但是不会触发 onpopstate 和 onhashchange 事件,当你 push 了几个 state 进去之后,再调用 history.back() 时候会触发 onpopstate 和 onhashchange 事件。

但是增加了下面的代码,onpopstate 和 onhashchange 事件就触发了。就很奇怪。下面的 originalPushState 本来是打算使用 const originalPushState = history.pushState; 但是反而不加这句起了作用。具体原因不清楚,暂时存疑,作为记录。

history.pushState = function (state, title, url) {
  // 添加自己的逻辑
  console.log('history.pushState is called');
  // 调用原来的 pushState 方法
  return originalPushState.apply(this, arguments);
};