详解vue填坑之解决部分浏览器不支持pushState方法
2018-07-12 09:44
465 查看
前端使用vue-router做单页面路由并开启history模式时,会碰到一个问题:部分低版本的手机浏览器、部分app以及IE9浏览器由于不支持pushState方法,会导致页面加载不出来。 解决这个问题的思路是:
- 当浏览器支持pushState方法时,开启history模式,不支持则开启hash模式
- 对链接做判断,当跳转的链接与路由模式不匹配时,则跳转至正确的链接
- nginx对域名下的路径访问均重写向至index.html
以下为具体实现方法:
判断使用何种路由模式
let isHans = typeof (history.pushState) === 'function'; let mode = isHans?'history':'hash';
判断请求链接
每次进入路由时,判断请求链接跳转的链接与路由模式不匹配时,则跳转至正确的链接
router.beforeEach(async (to, from, next) => { let toPath = to.fullPath,host = 'http://abc.cn'; let url = host + toPath; let reUrl = url; if(isHans && url.indexOf(`${host}/#/`) >-1){ reUrl = url.replace(`${host}/#/`,`${host}/car-insurance/`); } if(!isHans && url.indexOf(`${host}/#/`) === -1){ reUrl = url.replace(`${host}/car-insurance/`,`${host}/#/`); reUrl = reUrl.replace(`${host}/`,`${host}/#/`); } if(reUrl !== url){ window.location.replace(reUrl); return }
配置nginx
server { listen 80; listen 443; server_name abc.cn; root /data/html; index index.html index.htm index.json; access_log off ; set $isIndex 1; ##判断IE6-8 if ($http_user_agent ~* "MSIE [6-8].[0-9]") { rewrite .* /static/ie8.html break; } if ( $request_uri ~* "/(favicon.ico|index.js|root.txt|jd_root.txt)$" ) { #不跳转到index.html set $isIndex 0; } if ( $request_uri ~* "/static/" ) { #不跳转到index.html set $isIndex 0; } if ($isIndex = 1 ){ set $inIndexJS 0; rewrite .* /index.html; break; } }a
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- vue填坑之解决部分浏览器不支持pushState方法
- 解决不同浏览器对css支持问题详解
- 【优化】完美解决部分浏览器不支持placeholder的解决方案
- 利用vue+elementUI实现部分引入组件的方法详解
- vue.js 微信浏览器不支持lambda表达式
- IE8及低版本浏览器不支持CSS3 media queries的解决方法
- 用html5shiv.js解决ie低版本浏览器支持html5标签
- vue.js 微信浏览器不支持lambda表达式
- 解决浏览器background-image属性不支持css3动画
- IE8及低版本浏览器不支持CSS3 media queries的解决方法
- CEPH支持浏览器直接下载时-中文乱码问题解决
- vue.js 微信浏览器不支持lambda表达式
- javascript 解决浏览器不支持的问题
- 如何解决实际错误:配置IIS使其支持SSL加密的HTTPS,并且要求浏览器客户端证书
- 详解Vue文档中几个易忽视部分的剖析
- 当客户端浏览器不支持相应版本的apple时自动下载运行环境JVM的解决办法!
- android内置浏览器不支持websocket的解决方法
- 把github上没提供部分支持库的的项目导入eclipse时发生错误的解决思路
- 代码解决 有些浏览器不支持placeholder特性的问题
- 多文件上传插件Stream,解决不同浏览器上传文件的插件,是Uploadify的Flash版和Html5版的结合,带进度条,并支持html5断点续传,拖拽等功能