bug描述:

 

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

 

兼容谷歌 火狐 IE11及IEedge.

 

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

 

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

 

举个栗子

 

项目有主页, 路由1 和路由2 单个路由组成. 可在三个路由间任意跳转. 如下图.

 

正常浏览器: 不通过点击按钮, 而是直接在地址栏中改变路由, 界面是可以正常切换的.

 

IE11浏览器: bug就出现在不正常的IE浏览器中, 无论你怎么改变地址栏内的路由, 界面是不会变化的.

 

解决办法:

 

在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);

 

  }

 

}