详解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 相关文章推荐
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
深入学习JavaScript中的bom
May 27 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
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个人网站架设连环讲(一)
2006/10/09 PHP
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
php与js的区别是什么
2013/08/05 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
Python中datetime模块参考手册
2017/01/13 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
在双python下设置python3为默认的方法
2018/10/31 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
学生实习介绍信
2014/01/15 职场文书
出国导师推荐信
2014/01/16 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
员工自我工作评价
2015/03/06 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis