欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-07 16:58:13
前端使用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

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