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


Posted in Javascript onJuly 12, 2018

前端使用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

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

Javascript 相关文章推荐
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 Javascript
js调用webservice中的方法实现思路及代码
Feb 25 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
详解javascript new的运行机制
Jan 26 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 #Javascript
vue中如何实现pdf文件预览的方法
Jul 12 #Javascript
js+css实现红包雨效果
Jul 12 #Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 #Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 #Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 #Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 #Javascript
You might like
php cli 小技巧
2013/06/03 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
Laravel日志用法详解
2016/10/09 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
学习ExtJS form布局
2009/10/08 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
vue实现户籍管理系统
2020/05/29 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
华润集团网上药店:健一网
2016/09/19 全球购物
美国在线印刷公司:PsPrint
2017/10/12 全球购物
珍珠奶茶店创业计划书
2014/01/11 职场文书
初一体育教学反思
2014/01/29 职场文书
赤壁观后感(2)
2015/06/15 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
导游词之千岛湖
2019/09/23 职场文书
图文详解matlab原始处理图像几何变换
2021/07/09 Python