vue-router在ie9及以下history模式支持

Posted 2020-10-13 maxilo

参考：

　　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