详解vue填坑之解决部分浏览器不支持pushState方法

发布时间：2020-12-17 02:57:18 所属栏目：百科来源：网络整理

导读：前端使用vue-router做单页面路由并开启history模式时，会碰到一个问题：部分低版本的手机浏览器、部分app以及IE9浏览器由于不支持pushState方法，会导致页面加载不出来。解决这个问题的思路是：当浏览器支持pushState方法时，开启history模式，不支持则开

前端使用vue-router做单页面路由并开启history模式时，会碰到一个问题：部分低版本的手机浏览器、部分app以及IE9浏览器由于不支持pushState方法，会导致页面加载不出来。解决这个问题的思路是：

当浏览器支持pushState方法时，开启history模式，不支持则开启hash模式
对链接做判断，当跳转的链接与路由模式不匹配时，则跳转至正确的链接
nginx对域名下的路径访问均重写向至index.html

以下为具体实现方法：

判断使用何种路由模式

判断请求链接

每次进入路由时，判断请求链接跳转的链接与路由模式不匹配时，则跳转至正确的链接

{ 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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!