zoukankan      html  css  js  c++  java
  • 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],
    });
  • 相关阅读:
    HDU 4069 Squiggly Sudoku
    SPOJ 1771 Yet Another NQueen Problem
    POJ 3469 Dual Core CPU
    CF 118E Bertown roads
    URAL 1664 Pipeline Transportation
    POJ 3076 Sudoku
    UVA 10330 Power Transmission
    HDU 1426 Sudoku Killer
    POJ 3074 Sudoku
    HDU 3315 My Brute
  • 原文地址:https://www.cnblogs.com/momo798/p/9983207.html
Copyright © 2011-2022 走看看