Vue项目在IE11中路由改变页面不跳转

问题描述

vue项目路由使用hash模式，在谷歌、火狐浏览器中点击侧边栏菜单页面正常跳转，在IE11浏览器中点击侧边栏页面无变化，直接改变地址栏按回车键亦如此。

谷歌、火狐浏览器正常显示页面截图

正常显示/buyer/plan-nots对应的页面为未规划列表，/buyer/sources-plans-category对应的页面为规划品类管理。

IE11浏览器不跳转页面截图

IE11中第一次进入未规划列表，对应路由为/buyer/plan-nots，点击左侧菜单规划品类管理，地址栏已改变为/buyer/sources-plans-category,但页面依旧为未规划列表。

解决方法

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

上代码

mounted(){
  // 判断当前浏览器是否为 ie 浏览器
  if (!!window.ActiveXObject || 'ActiveXObject' in window) {
      // 监听 hashchange 事件，若当前地址栏路由改变，则手动调用 this.$router.push()方法
      window.addEventListener('hashchange', () => {
          let currentPath = window.location.hash.slice(1)
          if (this.$route.path !== currentPath) {
              this.$router.push(currentPath);// 主动更改路由界面
          }
      }, false);
  }
}