参考:
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 browsershistory.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 };
- issus
#在设计缓存时一定要考虑到上下文的依赖,过时的缓存有啥用呢
end
时间: 2024-11-05 23:32:53