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

这篇文章主要介绍了Vue项目中IE11地址栏直接改变路由页面不跳转bug怎么解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue项目中IE11地址栏直接改变路由页面不跳转bug怎么解决文章都会有所收获，下面我们一起来看看吧。

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

  }

}

关于“Vue项目中IE11地址栏直接改变路由页面不跳转bug怎么解决”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue项目中IE11地址栏直接改变路由页面不跳转bug怎么解决”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网html频道。