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

      這里supportsPushState在加載時已經被定義,就算在之后的 require('html5-history-api') 也是沒有意義的,緩存雖然是王道可有時用不好真的是個坑。。。。

      var VueRouter = function VueRouter (options) {
        if ( options === void 0 ) options = {};
      
        this.app = null;
        this.apps = [];
        this.options = options;
        this.beforeHooks = [];
        this.resolveHooks = [];
        this.afterHooks = [];
        this.matcher = createMatcher(options.routes || [], this);
      
        var mode = options.mode || 'hash';
        this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false; //這里直接使用了定義好的supportsPushState
      
        if (this.fallback) { //最終還是使用了hash模式
          mode = 'hash';
        }
        if (!inBrowser) {
          mode = 'abstract';
        }
        this.mode = mode;
        switch (mode) {
          case 'history':
            this.history = new HTML5History(this, options.base);
            break
          case 'hash':
            this.history = new HashHistory(this, options.base, this.fallback);
            break
          case 'abstract':
            this.history = new AbstractHistory(this, options.base);
            break
          default:
            {
              assert(false, ("invalid mode: " + mode));
            }
        }
      };　　

#在設計緩存時一定要考慮到上下文的依賴,過時的緩存有啥用呢

end