Vue项目:IE11中地址栏直接改变路由页面不跳转bug

网上找到有很多关于vue-router组件复用问题的回答，但是我的问题和组件复用无关…
记录一下网上好不容易找到的解决方法，原文更详细一点：Vue项目:IE11中地址栏直接改变路由页面不跳转bug

bug描述:

使用vue-cli搭建的项目, vue-router控制路由.

兼容谷歌 火狐 IE11及IEedge.

在谷歌 火狐 IEedge的地址栏直接改变路由地址, 回车的话, 路由页面能够刷新到响应路由界面.

但是在IE11中, 地址栏虽然改变了, 但页面却没有任何变化.

解决办法:

在app.vue中, 先判断是IE浏览器, 是的话, 给window绑定一个哈希值变化的事件, 当哈希值发生变化时, 将通过$router.path获取当前界面的路由, 与地址栏中的改变的哈希值就行比较, 如果不同, 就调用vue-router的push方法, 人为的去改变路由. 上代码:

mounted(){
  if (!!window.ActiveXObject || 'ActiveXObject' in window) {
      window.addEventListener('hashchange', () => {
          let currentPath = window.location.hash.slice(1)
          if (this.$route.path !== currentPath) {
              this.$router.push(currentPath);// 主动更改路由界面
          }
      }, false);
  }
}