当前位置:首页 > 编程教程 > vue技术文章 > 详解vue填坑之解决部分浏览器不支持pushState方法

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

  • 发布时间:
  • 作者:码农之家
  • 点击:151

这篇文章主要知识点是关于vue、pushState、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js前端开发:快速入门与专业应用
  • 类型:前端开发大小:3.6KB MB格式:PDF作者:陈陆扬
立即下载

详解vue填坑之解决部分浏览器不支持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

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

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

vue 相关电子书
学习笔记
网友NO.784754

详解从Vue-router到html5的pushState

最近在用vue的时候突然想到一个问题 首先,我们知道vue实现的单页应用中一般不会去刷新页面,因为刷新之后页面中的vuex数据就不见了。 其次,我们也知道一般情况下,url变更的时候,比如指定location.href、history.push、replace等,页面就会刷新。 那么问题来了,vue页面的页面跳转时怎么实现的?没刷新页面么?没刷新页面,又要改变url,加载新内容怎么做的? 去翻了一下vue-router的源码,找到这样一段 export class HTML5History extends History { ... push (location: RawLocation, onComplete?: Function, onAbort?: Function) { const { current: fromRoute } = this this.transitionTo(location, route = { pushState(cleanPath(this.base + route.fullPath)) handleScroll(this.router, route, fromRoute, false) onComplete onComplete(route) }, onAbort) } replace (location: RawLocation, onComplete?: Function, onAbort?: Function) { const { current: fromRoute } = this this.transitio……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com