vue-router中的hashchange和popstate事件无法触发的原因是什么？

Z时代
2024-03-14
分类：IT

window.addEventListener('hashchange', function (e) {
   console.log('hashchange')
})
window.addEventListener('popstate', function (e) {
   console.log('popstate')})

vue中，在hash模式下，进行页面间跳转时无法触发hashchange事件，而通过浏览器上的前进和后退按钮却可以触发，有没有人知道是什么原因？

回答：

不用回答了！我知道了￣□￣｜｜

hash模式下符合条件时调用的实际上是pushState方法，而pushState和replaceState是无法触发onpopstate事件的，导致无法被监听到
参考window.onpopstate
调用history.back()可以被监听到

vue-router源码：

function pushState (url, replace) {
  saveScrollPosition();
  // try...catch the pushState call to get around Safari
  // DOM Exception 18 where it limits to 100 pushState calls
  var history = window.history;
  try {
    if (replace) {
      history.replaceState({ key: _key }, '', url);
    } else {
      _key = genKey();
      history.pushState({ key: _key }, '', url);
    }
  } catch (e) {
    window.location[replace ? 'replace' : 'assign'](url);
  }
}
...
function pushHash (path) { // this.$router.push时触发
  if (supportsPushState) {
    pushState(getUrl(path));
  } else {
    window.location.hash = path;
  }
}...