参考:

  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

  

vue-router在ie9及以下history模式支持的更多相关文章

  1. 关于vue+element对ie9的兼容el-upload不支持在IE9上传

    关于vue+element对ie9的兼容el-upload不支持在IE9上传 https://lian-yue.github.io/vue-upload-component/#/zh-cn/ 解决方案 ...

  2. Vue history模式支持ie9

    vue 路由里面的history能让浏览器显示平常一样的链接,可以去掉#这种,但是在ie9下面会强制变成hash,因为history不支持ie9自动降级,可能就会影响美感,解决:可以在路由里面添加fa ...

  3. vue router mode 设置"hash"与"history"的区别

    router官网的说明如下: ********************************************我是官网说明分隔符--开始**************************** ...

  4. Vue 编程式导航,路由history模式

    import Vue from 'vue' import App from './App.vue' import Home from './components/Home.vue' import Ne ...

  5. Vue躬行记(8)——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  6. Vue Router的原理及history模式源码实现

    Hash 模式 URL中 # 后面的内容作为路径地址,可以通过location.url直接切换路由地址,如果只改变了#后面的内容,浏览器不会向服务器请求这个地址,会把这个地址 记录到浏览器的访问历史中 ...

  7. 在nginx上部署vue项目(history模式);

    在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...

  8. vue项目的mode:history模式

    最近做的Vue + Vue-Router + Webpack +minitUI项目碰到的问题,在此记录一下,Vue-router 中有hash模式和history模式,vue的路由默认是hash模式, ...

  9. 如何去除vue项目中的 # --- History模式

    来自:https://www.cnblogs.com/zhuzhenwei918/p/6892066.html 侵删 使用vue-cli搭建的环境,在配置好路由之后,可以看到下面的情况: 但是不难发现 ...

随机推荐

  1. 张高兴的 Windows 10 IoT 开发笔记:ToF Sensor VL53L0X

    GitHub : https://github.com/ZhangGaoxing/windows-iot-demo/tree/master/VL53L0X

  2. 数据挖掘 ID3

    本文讲的是数据挖掘中的ID3,这个有很多人做了,我也没有说什么改善,只是要考试,用我考试记录的来写,具有很大主观性,如果看到有觉得不对或感觉不好,请关掉浏览器或和我说,请不要生气或发不良的言论. 决策 ...

  3. 【CSS】伪类和伪元素选择器

    伪类 基于当前元素所处的状态或具有的特性,用于设置元素自身的特殊效果. a:link  规定所有未被点击的链接: a:visited  匹配多有已被点击过的链接: a:active  匹配所有鼠标按下 ...

  4. python中sys.exit()和os._exit(0)退出程序

    python中退出程序的两种方法,0为默认状态,可以为空,两者均会退出当前运行的程序,os._exit(0)中的0不能省略 sys.exit(0):可以捕获SystemExit异常,然后做相应的清理工 ...

  5. 基于Python实现matplotlib中动态更新图片(交互式绘图)

    最近在研究动态障碍物避障算法,在Python语言进行算法仿真时需要实时显示障碍物和运动物的当前位置和轨迹,利用Anaconda的Python打包集合,在Spyder中使用Python3.5语言和mat ...

  6. CountDownLatch、CyclicBarrier和 Semaphore比较

    1)CountDownLatch和CyclicBarrier都能够实现线程之间的等待,只不过它们侧重点不同: CountDownLatch一般用于某个线程A等待若干个其他线程执行完任务之后,它才执行: ...

  7. ELK系列~nxlog实现多位置文件的收集

    前几天我写了几篇关于ELK日志收集,存储和分析的文章: ELK系列~NLog.Targets.Fluentd到达如何通过tcp发到fluentd ELK系列~Nxlog日志收集加转发(解决log4日志 ...

  8. 有序线性表(存储结构数组)--Java实现

    /*有序数组:主要是为了提高查找的效率 *查找:无序数组--顺序查找,有序数组--折半查找 *其中插入比无序数组慢 * */ public class MyOrderedArray { private ...

  9. 加载web项目时报的错误:Tomcat version 6.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 Web modul

    用eclipse开发的java项目不能加载到tomcat6.0服务器,原因是:jst.web的版本高了 <installed facet="jst.web" version= ...

  10. Yii2之类自动加载

    在yii中,程序中需要使用到的类无需事先加载其类文件,在使用的时候才自动定位类文件位置并加载之,这么高效的运行方式得益于yii的类自动加载机制. Yii的类自动加载实际上使用的是PHP的类自动加载,所 ...