源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

关于vue-router路径计算问题

  • 时间:2022-09-04 23:18 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:关于vue-router路径计算问题
昨天刚刚发表了一个[url=https://github.com/vuejs/vue-router/pull/1353/files]前端跨域新方案[/url]尝试,今天在开发中就遇到的了问题。 [b]起因[/b] 前端使用的是[url=http://router.vuejs.org/zh-cn/]vue-router[/url]组件的[code]history[/code]模式,但是由于我们的整个页面都是从static(静态资源站)load过来的,所以其他页面自然也需要跨域去拿,然而就在跨域的时候 vue-router 出了问题。 [b]分析问题[/b] 我们的api站点在 api.com 而静态资源在 static.com,页面的base标签也指向static
<base href="http://static.com" rel="external nofollow" />
然而,在访问 [code]test[/code]模板时却跳到了[code]http://api.com/http:/static.com/test[/code] 经过一些简单的断点调试,锁定了以下代码 [source]: [url=https://github.com/vuejs/vue-router/blob/dev/dist/vue-router.esm.js]https://github.com/vuejs/vue-router/blob/dev/dist/vue-router.esm.js[/url]  [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路径,如果有兴趣一路跟踪的话会发现这个[code]base[/code]参数是由实例化[code]VueRouter[/code]时候传入的[code]options.base[/code]; 再看代码,他会判断如果base是空的,那么就会给一个默认值: 如果实在浏览器(非服务器环境)下执行,那么会调用[code]document.querySelector('base')[/code]来尝试获取[code]<base href='' />[/code]标签中[code]href[/code]属性的值; 在我们实际的场景中,这里得到一个跨域的绝对地址,然后紧接着
 if (base.charAt(0) !== '/') {
  base = '/' + base;
 }
当url第一个字符不是[code]/[/code]的时候加上[code]/[/code],这里非常明显是一个BUG 我的是绝对地址[code]http://static.com[/code]第一个字符当然不是[code]/[/code],所以才会由之前的[code]http://api.com/http:/static.com/test[/code]这样的网址 修改
if(/^([a-z]+:)?\/\//i.test(base)){

}else if (base.charAt(0) !== '/') {
 base = '/' + base;
}
为了尽量少破坏源码,这里加了一个空的if,当url是由协议开始时,认为是绝对路径。 * 绝对路径还有一种形式是[code] //static.com[/code] [b]测试[/b] 经过第一次修改,再次访问页面依然有问题,访问的页面依然是[code]http://api.com/http:/static.com/test[/code] [b]继续分析[/b] 再次跟踪源码后发现 [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, '/')
}

在发生[code]pushState[/code]之前,他还会对url再次进行处理[code]cleanPath[/code] 而这里的处理更简单,更粗暴,问题也更大。 他直接将2个斜杠[code]//[/code]替换为1个斜杠[code]/[/code],话说如果连续3个斜杠怎么办? 所以在处理[code]http://static.com/test[/code]地址的时候,其实会被处理成[code]http:/static.com/test [/code]又变成相对路径了... [b]继续修改[/b]
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 [url=https://github.com/vuejs/vue-router/pull/1353/files]https://github.com/vuejs/vue-router/pull/1353/files[/url] 话说vue-router的url处理比起Url.js来说真的是太粗暴了... 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部