routervue多个路径_vuerouter路径计算问题

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

起因

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

分析问题

我们的api站点在 api.com

而静态资源在 static.com&＃xff0c;页面的base标签也指向static

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

//1794行~1675行

function normalizeBase (base) {

if (!base) {

if (inBrowser) {

// respect tag

var baseEl &＃61; document.querySelector(&＃39;base&＃39;);

base &＃61; (baseEl && baseEl.getAttribute(&＃39;href&＃39;)) || &＃39;/&＃39;;

} else {

base &＃61; &＃39;/&＃39;;

}

}

// make sure there&＃39;s the starting slash

if (base.charAt(0) !&＃61;&＃61; &＃39;/&＃39;) {

base &＃61; &＃39;/&＃39; &＃43; base;

}

// remove trailing slash

return base.replace(/\/$/, &＃39;&＃39;)

}

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

再看代码&＃xff0c;他会判断如果base是空的&＃xff0c;那么就会给一个默认值&＃xff1a;

如果实在浏览器(非服务器环境)下执行&＃xff0c;那么会调用document.querySelector(&＃39;base&＃39;)来尝试获取标签中href属性的值&＃xff1b;

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

if (base.charAt(0) !&＃61;&＃61; &＃39;/&＃39;) {

base &＃61; &＃39;/&＃39; &＃43; base;

}

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

我的是绝对地址http://static.com第一个字符当然不是/&＃xff0c;

所以才会由之前的http://api.com/http:/static.com/test这样的网址

修改

if(/^([a-z]&＃43;:)?\/\//i.test(base)){

}else if (base.charAt(0) !&＃61;&＃61; &＃39;/&＃39;) {

base &＃61; &＃39;/&＃39; &＃43; base;

}

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

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

测试

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

继续分析

再次跟踪源码后发现

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

//2006行~2016行

HTML5History.prototype.push &＃61; function push (location, onComplete, onAbort) {

var this$1 &＃61; this;

var ref &＃61; this;

var fromRoute &＃61; ref.current;

this.transitionTo(location, function (route) {

pushState(cleanPath(this$1.base &＃43; route.fullPath));

handleScroll(this$1.router, route, fromRoute, false);

onComplete && onComplete(route);

}, onAbort);

};

//561行~563行

function cleanPath (path) {

return path.replace(/\/\//g, &＃39;/&＃39;)

}

在发生pushState之前&＃xff0c;他还会对url再次进行处理cleanPath

而这里的处理更简单&＃xff0c;更粗暴&＃xff0c;问题也更大。

他直接将2个斜杠//替换为1个斜杠/&＃xff0c;话说如果连续3个斜杠怎么办&＃xff1f;

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

继续修改

function cleanPath (path) {

var ishttp &＃61; /^([a-z]&＃43;:)?\/\//i.exec(path);

var http &＃61; Array.isArray(ishttp) ? ishttp[0] : &＃39;&＃39;;

return http &＃43; path.substr(http.length).replace(/\/{2,}/g, &＃39;/&＃39;);

}

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