博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue-router路径计算问题
阅读量:6257 次
发布时间:2019-06-22

本文共 2292 字,大约阅读时间需要 7 分钟。

昨天刚刚发表了一个,今天在开发中就遇到的了问题。

起因

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

分析问题

我们的api站点在 api.com

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

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

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

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

//1794行~1675行function normalizeBase (base) {  if (!base) {    if (inBrowser) {      // respect  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

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

转载地址:http://qgjsa.baihongyu.com/

你可能感兴趣的文章
Silverlight+WCF 新手实例 象棋 该谁下棋-B下A停(三十)
查看>>
2017到2021全球通信提供商CAPEX超2.1万亿美元
查看>>
CYQ.Data 轻量数据层之路 使用篇-辅助工具枚举生成器 视频 C (二十)
查看>>
苹果携手 SAP 开发的 iOS 云平台 SDK 正式上线
查看>>
EMC联邦公布最新超融合型设备
查看>>
IPv6太落后了:中国加速服务器援建
查看>>
《Web测试囧事》——1.2 索引值计算错误使资源缩略图显示和大图展现不一致...
查看>>
智能社会到来?微软建设实时工作环境搜索引擎
查看>>
Java中关键字volatile的作用
查看>>
阿里云总裁胡晓明:为世界带去中国云计算大数据服务
查看>>
最令人厌恶的行车八大陋习,你中了几条?
查看>>
“高端持续网络威胁” 比一般网攻更难应对
查看>>
服务器虚拟化技术百问百答大全
查看>>
《DBA修炼之道:数据库管理员的第一本书》——2.8节推荐书目
查看>>
协鑫集成力推金刚系列组件 全力打造精益光伏产品
查看>>
爱立信携手沃达丰 实现136Mbps的商用网络上行速度
查看>>
大数据与企业快速融合同时 面临的三大挑战
查看>>
安防大数据应用国家工程实验室在乌鲁木齐成立
查看>>
OpenStack代码贡献初体验
查看>>
定时任务发展史(一)
查看>>