详解vue填坑之解决部分浏览器不支持pushState方法
前端使用vue-router做单页面路由并开启history模式时，会碰到一个问题：部分低版本的手机浏览器、部分app以及IE9浏览器由于不支持pushState方法，会导致页面加载不出来。解决这个问题的思路是：
- 当浏览器支持pushState方法时，开启history模式，不支持则开启hash模式
- 对链接做判断，当跳转的链接与路由模式不匹配时，则跳转至正确的链接
- nginx对域名下的路径访问均重写向至index.html
以下为具体实现方法：
判断使用何种路由模式
letisHans=typeof(history.pushState)==='function'; letmode=isHans?'history':'hash';
判断请求链接
每次进入路由时，判断请求链接跳转的链接与路由模式不匹配时，则跳转至正确的链接
router.beforeEach(async(to,from,next)=>{
lettoPath=to.fullPath,host='http://abc.cn';
leturl=host+toPath;
letreUrl=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{
listen80;
listen443;
server_nameabc.cn;
root/data/html;
indexindex.htmlindex.htmindex.json;
access_logoff;
set$isIndex1;
##判断IE6-8
if($http_user_agent~*"MSIE[6-8].[0-9]"){
rewrite.*/static/ie8.htmlbreak;
}
if($request_uri~*"/(favicon.ico|index.js|root.txt|jd_root.txt)$"){
#不跳转到index.html
set$isIndex0;
}
if($request_uri~*"/static/"){
#不跳转到index.html
set$isIndex0;
}
if($isIndex=1){
set$inIndexJS0;
rewrite.*/index.html;
break;
}
}a
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。