房子修得再大也是临时住所，只有那个小木匣才是永久的家，所以，屋宽不如心宽，身安不如心安！
前端使用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方法。做人要当提起时提起，当放下时放下。功名富贵放不下，生命就在功名富贵里耗费；悲欢离合放不下，生命就在悲欢离合里挣扎；放不下金钱，放不下名位，放不下人情，生命就在金钱名位人情里打滚；对是非放不下，对得失放不下，对善恶放不下，生命就在是非、善恶、得失里面，不得安宁。更多关于详解vue填坑之如何解决部分浏览器不支持pushState方法请关注haodaima.com其它相关文章！
