zoukankan      html  css  js  c++  java
  • vue-router在ie9及以下history模式支持

    参考:

      https://www.npmjs.com/package/vue-route

      https://github.com/devote/HTML5-History-API

    提要:

      ie9及以下不支持html5 history新特性

    解决:

    • npm install html5-history-api
    • <!--[if lte IE 9]><script src=“path_to_history.js"></script><![endif]-->
      • issus
        • history.js - IE8+ and other browsers

          history.ielte7.js - IE6+ and other browsers          

        • 使用webpack时 
           1  1 var supportsPushState = inBrowser && (function () {
           2  2   var ua = window.navigator.userAgent;
           3  3 
           4  4   if (
           5  5     (ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) &&
           6  6     ua.indexOf('Mobile Safari') !== -1 &&
           7  7     ua.indexOf('Chrome') === -1 &&
           8  8     ua.indexOf('Windows Phone') === -1
           9  9   ) {
          10 10     return false
          11 11   }
          12 12 
          13 13   return window.history && 'pushState' in window.history
          14 14 })();

          这里supportsPushState在加载时已经被定义,就算在之后的 1 require('html5-history-api') 也是没有意义的,缓存虽然是王道可有时用不好真的是个坑。。。。

           1 var VueRouter = function VueRouter (options) {
           2   if ( options === void 0 ) options = {};
           3 
           4   this.app = null;
           5   this.apps = [];
           6   this.options = options;
           7   this.beforeHooks = [];
           8   this.resolveHooks = [];
           9   this.afterHooks = [];
          10   this.matcher = createMatcher(options.routes || [], this);
          11 
          12   var mode = options.mode || 'hash';
          13   this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false; //这里直接使用了定义好的supportsPushState
          14 
          15   if (this.fallback) { //最终还是使用了hash模式
          16     mode = 'hash';
          17   }
          18   if (!inBrowser) {
          19     mode = 'abstract';
          20   }
          21   this.mode = mode;
          22   switch (mode) {
          23     case 'history':
          24       this.history = new HTML5History(this, options.base);
          25       break
          26     case 'hash':
          27       this.history = new HashHistory(this, options.base, this.fallback);
          28       break
          29     case 'abstract':
          30       this.history = new AbstractHistory(this, options.base);
          31       break
          32     default:
          33       {
          34         assert(false, ("invalid mode: " + mode));
          35       }
          36   }
          37 };  

    #在设计缓存时一定要考虑到上下文的依赖,过时的缓存有啥用呢

    end

      

  • 相关阅读:
    servlet 传值和取值问题
    .net 获取存储过程返回值和Output输出参数值
    游标使用
    java中直接根据Date获取明天的日期
    Linux通配符与特殊符号知识大全
    zabbix监控
    KVM介绍 虚拟化简史
    GFS文件系统
    Oracle JOB定时器
    IDEA JSP 不能使用EL表达式
  • 原文地址:https://www.cnblogs.com/maxilo/p/7784614.html
Copyright © 2011-2022 走看看