关于vue-router路径计算问题


Posted in Javascript onMay 10, 2017

昨天刚刚发表了一个前端跨域新方案尝试,今天在开发中就遇到的了问题。

起因

前端使用的是vue-router组件的history模式,但是由于我们的整个页面都是从static(静态资源站)load过来的,所以其他页面自然也需要跨域去拿,然而就在跨域的时候 vue-router 出了问题。

分析问题

我们的api站点在 api.com

而静态资源在 static.com,页面的base标签也指向static

<base href="http://static.com" rel="external nofollow" />

然而,在访问 test模板时却跳到了http://api.com/http:/static.com/test

经过一些简单的断点调试,锁定了以下代码

[source]: https://github.com/vuejs/vue-router/blob/dev/dist/vue-router.esm.js

 [vue-router.esm.js][source]

//1794行~1675行
function normalizeBase (base) {
 if (!base) {
  if (inBrowser) {
   // respect <base> tag
   var baseEl = document.querySelector('base');
   base = (baseEl && baseEl.getAttribute('href')) || '/';
  } else {
   base = '/';
  }
 }
 // make sure there's the starting slash
 if (base.charAt(0) !== '/') {
  base = '/' + base;
 }
 // remove trailing slash
 return base.replace(/\/$/, '')
}

这段代码的作用是设置路由的base路径,如果有兴趣一路跟踪的话会发现这个base参数是由实例化VueRouter时候传入的options.base

再看代码,他会判断如果base是空的,那么就会给一个默认值:

如果实在浏览器(非服务器环境)下执行,那么会调用document.querySelector('base')来尝试获取<base href='' />标签中href属性的值;

在我们实际的场景中,这里得到一个跨域的绝对地址,然后紧接着

if (base.charAt(0) !== '/') {
  base = '/' + base;
 }

当url第一个字符不是/的时候加上/,这里非常明显是一个BUG

我的是绝对地址http://static.com第一个字符当然不是/,所以才会由之前的http://api.com/http:/static.com/test这样的网址

修改

if(/^([a-z]+:)?\/\//i.test(base)){

}else if (base.charAt(0) !== '/') {
 base = '/' + base;
}

为了尽量少破坏源码,这里加了一个空的if,当url是由协议开始时,认为是绝对路径。

* 绝对路径还有一种形式是 //static.com

测试

经过第一次修改,再次访问页面依然有问题,访问的页面依然是http://api.com/http:/static.com/test

继续分析

再次跟踪源码后发现

[vue-router.esm.js][source]

//2006行~2016行
 HTML5History.prototype.push = function push (location, onComplete, onAbort) {
  var this$1 = this;

  var ref = this;
  var fromRoute = ref.current;
  this.transitionTo(location, function (route) {
   pushState(cleanPath(this$1.base + route.fullPath));
   handleScroll(this$1.router, route, fromRoute, false);
   onComplete && onComplete(route);
  }, onAbort);
 };
//561行~563行
function cleanPath (path) {
 return path.replace(/\/\//g, '/')
}

在发生pushState之前,他还会对url再次进行处理cleanPath

而这里的处理更简单,更粗暴,问题也更大。

他直接将2个斜杠//替换为1个斜杠/,话说如果连续3个斜杠怎么办?

所以在处理http://static.com/test地址的时候,其实会被处理成http:/static.com/test 又变成相对路径了...

继续修改

function cleanPath (path) {
  var ishttp = /^([a-z]+:)?\/\//i.exec(path);
  var http = Array.isArray(ishttp) ? ishttp[0] : '';
  return http + path.substr(http.length).replace(/\/{2,}/g, '/');
}

如果是协议开始,则排除协议内容之后,将2个或2个以上连续在一起的斜杠替换为1个斜杠。

** 完成提交pull

https://github.com/vuejs/vue-router/pull/1353/files

话说vue-router的url处理比起Url.js来说真的是太粗暴了...

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

Javascript 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
vue-quill-editor实现图片上传功能
Aug 08 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 #Javascript
Bootstrap table使用方法总结
May 10 #Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 #Javascript
vue-axios使用详解
May 10 #Javascript
详解axios在vue中的简单配置与使用
May 10 #Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 #jQuery
JavaScript实现form表单的多文件上传
Mar 27 #Javascript
You might like
新52大事件
2020/03/03 欧美动漫
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
前端必学之PHP语法基础
2016/01/01 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
Python编程求质数实例代码
2018/01/31 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
实习生自荐信范文
2013/11/13 职场文书
工厂厂长的职责
2013/12/12 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
分公司任命书
2014/06/06 职场文书
应届生求职自荐信
2014/07/04 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
大学生团日活动总结
2015/05/06 职场文书
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python
MongoDB数据库之添删改查
2022/04/26 MongoDB