关于vue-router路径计算问题

作者:冰麟轻武 时间:2024-05-13 09:07:32 

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

起因

前端使用的是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来说真的是太粗暴了...

来源:http://www.cnblogs.com/blqw/p/6751622.html

标签:vue,router,路径
0
投稿

猜你喜欢

  • python_tkinter事件类型详情

    2021-11-29 10:09:30
  • xml文件调用css

    2008-09-05 17:12:00
  • PHP制作图形验证码代码分享

    2024-05-11 09:26:01
  • 关于ASP生成伪参数加密技巧

    2008-07-16 12:05:00
  • python对文件的操作方法汇总

    2023-04-13 18:52:59
  • pytorch 带batch的tensor类型图像显示操作

    2023-06-02 08:47:26
  • 使用python将多个excel文件合并到同一个文件的方法

    2023-01-14 18:53:42
  • 如何利用Python 快速找到最大文件

    2021-08-06 23:22:47
  • PyQt 如何创建自定义QWidget

    2023-09-13 17:30:48
  • pycharm-professional-2020.1下载与激活的教程

    2023-03-08 08:12:38
  • Python复制文件操作实例详解

    2023-10-22 19:15:29
  • 利用python清除移动硬盘中的临时文件

    2022-12-07 21:43:11
  • python-序列解包(对可迭代元素的快速取值方法)

    2023-12-28 23:23:57
  • Python之Numpy的超实用基础详细教程

    2021-12-05 19:06:23
  • 浅析Oracle和Mysql分页的区别

    2024-01-26 19:03:59
  • 解决python3.6用cx_Oracle库连接Oracle的问题

    2023-06-12 02:38:46
  • python中sort和sorted排序的实例方法

    2022-12-22 09:10:12
  • Python MOCK SERVER moco模拟接口测试过程解析

    2023-12-15 06:37:00
  • python 读txt文件,按‘,’分割每行数据操作

    2022-11-11 08:04:17
  • window下mysql 8.0.15 winx64安装配置方法图文教程

    2024-01-23 10:58:58
  • asp之家 网络编程 m.aspxhome.com