526互联

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

发布时间 2023-06-15 14:21:19作者: porter_代码工作者

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

  1. 当浏览器支持pushState方法时，开启history模式，不支持则开启hash模式
  2. 对链接做判断，当跳转的链接与路由模式不匹配时，则跳转至正确的链接
  3. 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
    }