如何在url上拼接对象参数？用&和?=拼接

关注

原创 2023-10-20 17:26:02 2.7k 阅读 AI 写同款· GEO 优化 ›

vue路由URL拼接全局参数 vue-router地址栏URL拼接全局参数业务需求： vue单页面项目，需要在URL地址栏拼接固定的参数，在所有页面使用。默认采用vue路由的history模式；hash模式也可以同样适用。主要是在 vue-router 导航守卫的全局前置守卫中实现。即 vue-router 生命周期钩子函数 router.beforeEach 中进行路由拦截处理。主要代码： router.beforeEach((to, from, next) => { if (Object.keys(to.quer 阅读详情

业务需求

下载接口需要把参数拼接到接口地址上发给后端。

把 { orderId:156, typeId:984 } 处理成 http://test.com/download?orderId=156&typeId=984

方法一使用for循环

首先，函数从环境变量 VUE_APP_BASE_API 中获取基本的 API 地址，并将其赋值给 baseUrl 变量。接下来，通过拼接传入的 url 参数和问号字符，构建了 expurl 变量。

然后，使用循环遍历传入的 query 对象的属性。在每次循环中，将属性名和属性值以 key=value 的形式拼接到 queryStr 字符串中。如果当前属性不是最后一个属性，那么也要拼接上 & 字符。

最后，将 queryStr 拼接到 expurl 后面，得到最终的导出 URL，并将其返回给调用方。

function getExportUrl2(url, query) {
  let baseUrl = process.env.VUE_APP_BASE_API;

  // 非本地环境的BASE_API为比如为“/api”，如果proxy代理不能去掉重复的api，要手动去掉，添加以下代码
  // if (process.env.VUE_APP_BASE_API.toString().indexOf("http://10.0") == -1) {
  //   baseUrl = "";
  // }

  let expurl = baseUrl + url + "?";
  let queryStr = "";
  const keys = Object.keys(query);
  for (let i = 0; i < keys.length; i++) {
    const key = keys[i];
    queryStr += key + "=" + query[key];

    if (i !== keys.length - 1) {
      queryStr += "&";
    }
  }
  expurl += queryStr;

  return expurl;
}

方法二借助qs（querystring）库

qs是一个npm仓库所管理的包，主要用来处理url地址。

qs主要有两个方法：

qs.stringify()是将对象序列化成url的形式，以&拼接。
qs.parse()是将url解析成对象的形式

将参数序列化成url的形式用到的是qs.stringigy()。

安装

npm install qs --save

使用

import qs from 'qs'
let urlObj = {
  orderNo:'8899665',
  type:'23'
}
let url = qs.stringify(urlObj)
console.log(url)  //'orderNo=8899665&type=23'


let requestUrl = '/test/list'
const paramStringify = Qs.stringify(params)
this.$request.post(requestUrl,paramStringify).then(({code,data,message}) => {
  if(code == 200){
    this.$message.success('修改成功')
  }else{
    this.$message.error(message)
  }
})

收录于