2020-03-18 解决vue-router在IE11下不跳转

2020-03-18  本文已影响0人  追寻1989
IE11 报错图片

解决办法1(推荐):

main.js

// 补全IE不兼容的函数
import '@/polyfill.js'

polyfill.js

// ie es6数组函数设置
// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex
if (!Array.prototype.findIndex) {
  Object.defineProperty(Array.prototype, 'findIndex', {
    value: function(predicate) {
      // 1. Let O be ? ToObject(this value).
      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
      if (typeof predicate !== 'function') {
        throw new TypeError('predicate must be a function');
      }

      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
      var thisArg = arguments[1];

      // 5. Let k be 0.
      var k = 0;

      // 6. Repeat, while k < len
      while (k < len) {
        // a. Let Pk be ! ToString(k).
        // b. Let kValue be ? Get(O, Pk).
        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
        // d. If testResult is true, return k.
        var kValue = o[k];
        if (predicate.call(thisArg, kValue, k, o)) {
          return k;
        }
        // e. Increase k by 1.
        k++;
      }

      // 7. Return -1.
      return -1;
    }
  });
}

解决办法2(不推荐):

在app.vue中, 先判断是IE浏览器, 是的话, 给window绑定一个哈希值变化的事件, 当哈希值发生变化时, 将通过$router.path获取当前界面的路由, 与地址栏中的改变的哈希值就行比较, 如果不同, 就调用vue-router的push方法, 人为的去改变路由.
上代码:
app.vue

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

参考文献:https://zhuanlan.zhihu.com/p/47873302

上一篇 下一篇

猜你喜欢

热点阅读