Vue进阶（六十七）：VUE路由-IE浏览器中的路由跳转后页面不变更问题

前言

IE11浏览器中，在进行正常页面跳转操作后（页面A跳转到页面B），点击浏览器的左上角的‘后退’按钮，点击后，可以看到url地址已经发生了变化（url由页面B变为页面A），hash值也已经是上一页的路由，但是浏览器显示的内容却没有发生变化（依旧是页面B）。若将url在一个新的选项卡中复制粘贴是可以打开页面的（页面A用当前url打开没问题）。

没有任何报错（页面A和页面B无任何js错误或者兼容性错误）。

若有错误也会导致页面跳转不成功，页面依旧是当前页面，但是控制台会报ERROR。

解决方法

在App.vue中添加判断ie和手动修复的方法。

以下是参考自这里来的方案：[vue2 vue-router a标签在IE下不跳转，跳转失效] 。

export default {
  name: 'App',
  mounted(){
    function checkIE(){
      return '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style
    }
    if (checkIE()) {
      window.addEventListener('hashchange', () => {
        var currentPath = window.location.hash.slice(1);
        if (this.$route.path !== currentPath) {
        this.$router.push(currentPath)
      }
    }, false)
    }
  }
}

以下是参考后，根据自己项目写的方案，主要点在于添加hashchange监听：

<script>
  import {IsIE} from './utils/method'
export default {
  name: 'App',
  mounted () {
    if (IsIE) {
      window.addEventListener('hashchange', () => {
        let currentPath = window.location.hash.slice(1)
        if (this.$route.path !== currentPath) {
          this.$router.push(currentPath)
        }
      }, false)
    }
  }
}
</script>

推论

vue的路由机制应该是已经执行了的，理由是url已经发生了变化。

但是未能触发ie浏览器的页面刷新，因为vue的这个项目是一个单页应用，使用的hash路由，而且是用的vue-router做的控制，极有可能是IE浏览器对这一块儿的兼容性/更新做的并不好。理由是IE11出的时候单页应用也没火，IE也很快被微软抛弃开始使用Edge。