请教复杂URL拼接的应用

版本:vue3
有一个轮播图的组件(假设叫slide),点击轮播图可以实现页面的跳转,但是跳转的地址五花八门,什么样的都有,我先举例传给组件的参数吧:

items=[
    {"id":10,"departmentId":20,"Name":"Tom"},
    {"id":11,"departmentId":22,"Name":"Jack"},
    {"id":12,"departmentId":24,"Name":"Lili"}
]

跳转的URL可能是如下:

// 单个slide中每个轮播图的跳转地址格式一致
/person/info/10 // 10是id,/person/info需要指定
/person/info?id=10 // 10是id
/department/11/person/22 // 11是id,22是departmentId
/department/11/person/22?name=Jack // Jack是Name

所以slide需要知道怎么拼接url,包括基础的url地址,拼接的格式,和几个参数拼接,以及这些参数的变量名叫什么
目前思路是这样的,slide接受一个参数createUrl是一个function,利用这个function来实现url的拼接,但是写起来毫无头绪,请大神不吝赐教。

讨论数量: 6

items里就不能把跳转目标地址带上么

7个月前 评论
meitian (楼主) 7个月前

id departmentId Name 都是 param,/department/11/person/22 是 pathinfo 形式,?name=Jack 是 search,你可以封装一个函数,传入 pathinfo param 和 search param,描述好问 ai

file

function format(param, search) {
  // 将参数对象转换为字符串
  let paramStr = '';
  for (let key in param) {
    if (paramStr.length > 0) {
      paramStr += '/';
    }
    paramStr += key + '/' + param[key];
  }

  // 将搜索参数对象转换为字符串
  let searchStr = '';
  for (let key in search) {
    if (searchStr.length > 0) {
      searchStr += '&';
    }
    searchStr += key + '=' + search[key];
  }

  if (searchStr) {
     return paramStr + '?' + searchStr;
  }
  return paramStr
}
function createUrl(template, params, search) {

      let matches = template.match(/\{([^}]*)\}/g);// ["{departmentId}", "{id}"]

      matches.forEach(function (value) {
        let key = value.replace(/[\{\}]/g, '') // departmentId
        template = template.replace(value, params[key])
      })

      return template;
    }
    var template = '/department/{departmentId}/person/{id}?name={Name}'
    var params = { "id": 10, "departmentId": 20, "Name": "Tom" }

    let res = createUrl(template, params)
    console.log(res); // /department/20/person/10?name=Tom
7个月前 评论

1、slide 组件接收处理好的参数,即传入的 dataList 中有链接字段,这个链接字段需要在外部处理好后传入

2、按你的想法,传入一个 createURL: Function,在这个里面处理链接,其实就是把链接处理换了个地方而已

1、2 中,slide 组件都不处理链接,传啥用啥

7个月前 评论
meitian (楼主) 7个月前
zhaojjiang (作者) 7个月前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!