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 browsershistory.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));
}
}
};
- issus
#在设计缓存时一定要考虑到上下文的依赖,过时的缓存有啥用呢
end
vue-router在ie9及以下history模式支持的更多相关文章
- 关于vue+element对ie9的兼容el-upload不支持在IE9上传
关于vue+element对ie9的兼容el-upload不支持在IE9上传 https://lian-yue.github.io/vue-upload-component/#/zh-cn/ 解决方案 ...
- Vue history模式支持ie9
vue 路由里面的history能让浏览器显示平常一样的链接,可以去掉#这种,但是在ie9下面会强制变成hash,因为history不支持ie9自动降级,可能就会影响美感,解决:可以在路由里面添加fa ...
- vue router mode 设置"hash"与"history"的区别
router官网的说明如下: ********************************************我是官网说明分隔符--开始**************************** ...
- Vue 编程式导航,路由history模式
import Vue from 'vue' import App from './App.vue' import Home from './components/Home.vue' import Ne ...
- Vue躬行记(8)——Vue Router
虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...
- Vue Router的原理及history模式源码实现
Hash 模式 URL中 # 后面的内容作为路径地址,可以通过location.url直接切换路由地址,如果只改变了#后面的内容,浏览器不会向服务器请求这个地址,会把这个地址 记录到浏览器的访问历史中 ...
- 在nginx上部署vue项目(history模式);
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
- vue项目的mode:history模式
最近做的Vue + Vue-Router + Webpack +minitUI项目碰到的问题,在此记录一下,Vue-router 中有hash模式和history模式,vue的路由默认是hash模式, ...
- 如何去除vue项目中的 # --- History模式
来自:https://www.cnblogs.com/zhuzhenwei918/p/6892066.html 侵删 使用vue-cli搭建的环境,在配置好路由之后,可以看到下面的情况: 但是不难发现 ...
随机推荐
- cocos2dx - 环境配置,项目创建
准备工具 cocos2dx当前最新版本:v3.9 官网下载地址: http://www.cocos.com/download/ python 2.7x最新版本:2.7.11 官 ...
- 笨鸟先飞之ASP.NET MVC系列之过滤器(04认证过滤器过滤器)
概念介绍 认证过滤器是MVC5的新特性,它有一个相对复杂的生命周期,它在其他所有过滤器之前运行,我们可以在认证过滤器中创建一个我们定义的认证方法,也可以结合授权过滤器做一个复杂的认证方法,这个方法可以 ...
- PHP+nginx 线上服务研究(一)
一. 基本介绍 OpenResty® 是一个基于Nginx和Lua的高性能Web平台,其内部集成了大量精良的Lua库.第三方模块以及大多数的依赖项.用于方便搭建能够处理超高并发.扩展性极高的动态Web ...
- svn解除控制
转自 :http://guoyong123.blog.163.com/blog/static/162543782010428102928353/ 一直在研究svn,今天让我们组将文件加入到服务器上,但 ...
- Linux中创建Daemon进程的三种方法
什么是daemon进程? Unix/Linux中的daemon进程类似于Windows中的后台服务进程,一直在后台运行运行,例如http服务进程nginx,ssh服务进程sshd等.注意,其英文拼写为 ...
- Python学习笔记(二)-Python文件类型及编程模式
Python环境搭建:linux,Windows... Linux下:[root@localhost StudyPython]# python #进入交互模式Python 2.7.11 (defaul ...
- 使用ftp软件上传下载php文件时换行丢失bug(全部变为一行)
文章来源:http://www.piaoyi.org/computer/ftp-php-r-n-bug.html 正 文: 在使用ftp软件上传下载php源文件时,我们偶尔会发现在本地windows下 ...
- thinkphp使用phpqrcode生成带logo二维码
//二维码图片保存路径 $pathname = date("Ymd",time()); $pathname = "./Qrcode/" . $pathname; ...
- SSH整合的详细步骤
SSH整合 新建一个动态web工程-->加入Spring-->加入Hibernate-->加入Struts2 1.在 web中应用Spring 目的:在web应用程序加载成功之后,就 ...
- Python之qq邮件
用python发送电子邮件验证这个功能,可以说花费了我很久时间,这也是为什么我重头敲了之前的两遍代码.不要说我傻,仅仅是笨了一点而已 ^.- . 之前我所参考是如何发送 GMail. 但是我并不想这么 ...