详解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之WEB开发调试利器:Firebug 下载
Jan 13 Javascript
ExtJs使用IFrame的实现代码
Mar 24 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
微信小程序实用代码段(收藏版)
Dec 17 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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获取bing每日壁纸示例分享
2014/02/25 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
10个简化PHP开发的工具
2014/12/25 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
python编程使用协程并发的优缺点
2018/09/20 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
浅谈python出错时traceback的解读
2020/07/15 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
《都江堰》教学反思
2014/02/07 职场文书
装修设计师求职信
2014/02/26 职场文书
党员一句话承诺大全
2014/03/28 职场文书
美化环境标语
2014/06/20 职场文书
商业用房租赁协议书
2014/10/13 职场文书
房产分割协议书范文
2014/11/21 职场文书
员工开除通知书
2015/04/25 职场文书
法制教育观后感
2015/06/17 职场文书
情感电台广播稿
2015/08/18 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python