请教复杂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的拼接，但是写起来毫无头绪，请大神不吝赐教。

meitian

课程读者 89 声望

暂无个人描述~

0 人点赞

讨论数量: 6

cevin

320 声望

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

1年前评论

meitian （楼主）

后端传的数据里有url这个字段，但是是空的，实在不行就只能我自己重新组合tems了。

php_yt

1.1k 声望

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

1年前评论

zhaojjiang

课程读者 314 声望 / @@ @ @@

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

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

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

1年前评论

meitian （楼主）

意思就是我在父组件中处理好连接地址，放入到items中去，一块传给子组件？

zhaojjiang （作者）

@meitian 对

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

帮助

请教复杂URL拼接的应用

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请教复杂URL拼接的应用

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录