详解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 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
图像替换新技术 状态域方法
Jan 28 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
搭建vscode+vue环境的详细教程
Aug 31 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
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
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
python psutil库安装教程
2018/03/19 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
Django nginx配置实现过程详解
2020/09/10 Python
Python extract及contains方法代码实例
2020/09/11 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
经济管理专业自荐信
2013/12/30 职场文书
师范生自荐信模板
2014/05/28 职场文书
教师求职自荐书
2014/06/14 职场文书
教育见习报告范文
2014/11/03 职场文书
中层干部考核评语
2015/01/04 职场文书
财务会计岗位职责
2015/02/03 职场文书
食品安全责任书范本
2015/05/09 职场文书
Ajax实现异步加载数据
2021/11/17 Javascript