vue-router不触发hashchange,popstate,使用$watch()解决问题

vue-router不触发hashchange,popstate

在公司的项目中，vue2 和 vue router 3 的项目代码中，我监听了事件 hashchange popstate，想获取进入页面的记录，方便跟踪用户的遇到的问题。

// 4. 监听 hashchange 事件（vue-router 3.1.6不触发）
window.addEventListener('hashchange', function (e) {
  console.warn('----hashchange', e.type);
}, { capture: true });

// vue-router 3.1.6不触发 popstate
window.addEventListener('popstate', function (e) {
  console.warn('----popstate', e.type);
}, { capture: true });

事件监听了，但是没有触发事件，popstate hashchange 都没有触发。

我的 vue-router 工作模式 mode 是 hash 模式，我以为是能触发 hashchange ，结果并没有符合我的预期。

但是点击浏览器的后退、前进，是会触发 popstate 事件的。

理论来说，这样应该是能监听到事件的，chatGPT、阿里通义灵码 AI帮我写的代码，也都是推荐这么写，但是实际上运行起来，一点效果都没有。

项目紧急，暂时没事件考虑细节了。先想想怎么解决吧

使用 $watch('$route') 监听路由切换，解决问题

// 监听 $route 变化
  var appDom = document.getElementById('app')
  var stopWatch = appDom.__vue__.$watch('$route', function (to, from) {
    console.log('$watch', to.path, to, from)
  })

  // stopWatch()可以解除监听

问题就解决了。

暂未深究为什么没触发事件的原理。

上面的代码，使用 vuejs 的 $watch() 监听了 $route 路由对象的变化，添加了监听函数。

对于$watch()取消监听，也做了示例，如果手动监听了事件，要记得移除监听，把添加的事件取消掉，不然的话，进入其他页面，监听函数还在不断的触发执行，取消监听后就没问题了。

问题参考

vue路由变化没有触发hashchange事件

  https://segmentfault.com/q/1010000040105060

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

  https://segmentfault.com/q/1010000016618646

  https://juejin.cn/post/6844904163793616910

没有死抠 popstate hashchange 的问题， 换个思路，把问题解决了。解决问题要避免进入死胡同，避免一直出不来。

至此，解决了 vue-router 不触发hashchange的问题，解决了 popstate 事件监听不执行、失效的问题。