• vue-router在IE11中页面不跳转


    情景:

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

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

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

    解决方法:

    IE11上router-link无法跳转,主要是因为当url的hash change的时候,浏览器没有做出相应。这时候需要做一个兼容,当浏览器是IE11时手动给url加一个hashChange事件。

    方案一:

    new Vue({
      el: '#app',
      router,
      store,
      template: '<Layout/>',
      components: { Layout },
      render: function (createElement) {
        if ('-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style) {
          window.addEventListener('hashchange', () => {
            var currentPath = window.location.hash.slice(1)
            if (this.$route.path !== currentPath) {
              this.$router.push(currentPath)
            }
          }, false)
        }
        return createElement(Layout);
      }
    })

    方案二:

    const IE11RouterFix = {
        methods: {
            hashChangeHandler: function() { this.$router.push(window.location.hash.substring(1, window.location.hash.length)); },
            isIE11: function() { return !!window.MSInputMethodContext && !!document.documentMode; }
        },
        mounted: function() { if ( this.isIE11() ) { window.addEventListener('hashchange', this.hashChangeHandler); } },
        destroyed: function() { if ( this.isIE11() ) { window.removeEventListener('hashchange', this.hashChangeHandler); } }
    };
    
    new Vue({
        /* your stuff */
        mixins: [IE11RouterFix],
    });
  • 相关阅读:
    2017 ACM/ICPC Asia Regional Qingdao Online
    2017 ACM/ICPC Asia Regional Qingdao Online
    2017 ACM-ICPC 亚洲区(西安赛区)网络赛 Sum
    2017 ACM/ICPC Asia Regional Shenyang Online array array array
    无权最短路
    解题报告:poj 3070
    矩阵学习笔记
    拓扑排序
    LIS严格递增和非递减模板
    2017 ACM-ICPC 亚洲区(乌鲁木齐赛区)网络赛-A banana·
  • 原文地址:https://www.cnblogs.com/momo798/p/9983207.html
Copyright © 2020-2023  润新知