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

SHQ5785 发表于 2021/03/17 10:07:09 2021/03/17
【摘要】 前言IE11浏览器中,在进行正常页面跳转操作后(页面A跳转到页面B),点击浏览器的左上角的‘后退’按钮,点击后,可以看到url地址已经发生了变化(url由页面B变为页面A),hash值也已经是上一页的路由,但是浏览器显示的内容却没有发生变化(依旧是页面B)。若将url在一个新的选项卡中复制粘贴是可以打开页面的(页面A用当前url打开没问题)。没有任何报错(页面A和页面B无任何js错误或者兼...

前言

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。

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请发送邮件至:cloudbbs@huaweicloud.com;如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。