关于vue-router路径计算问题
昨天刚刚发表了一个前端跨域新方案尝试，今天在开发中就遇到的了问题。
起因
前端使用的是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]+:)"htmlcode">//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]+:)"_blank" href="https://github.com/vuejs/vue-router/pull/1353/files" rel="external nofollow" rel="external nofollow" >https://github.com/vuejs/vue-router/pull/1353/files
话说vue-router的url处理比起Url.js来说真的是太粗暴了...
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：JavaScript使用readAsDataUrl方法预览图片
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。