详解vue填坑之解决部分浏览器不支持pushState方法
程序员文章站
2022-07-03 21:50:49
前端使用vue-router做单页面路由并开启history模式时,会碰到一个问题:部分低版本的手机浏览器、部分app以及ie9浏览器由于不支持pushstate方法,会导...
前端使用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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。