【Vue】qs 模块解决前端 get query 请求中相同参数名问题

需求展示

GET 传参要求

customer-user/select-representatives/actionId?profileIds=xxx?profileIds=xxx?profileIds=xxx

如果选择拼接字符串，浏览器只会解析到到第一个参数，后面因为同名无法解析。

网上查到的方法都是说，把一样的参数名变成一个数组像下面这样：

let profileIds = ['xxxx','xxxx']

但是解析后又变成:

profileIds[]=xxx&profileIds[]=xxx

所以还是得想办法解决啊。。。

解决方法

1.首先我们要安装 qs，可以百度去了解下这个包，主要是做 url 序列化的转译和编译的。npm安装的qs模块

npm insatall qs -s

2.配置axios参数序列化，把中括号等特殊字符序列化

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
  timeout: 100000, // request timeout
  // 配置axios参数序列化,把中括号等特殊字符序列化
  paramsSerializer: (params) => qs.stringify(params, { indices: false }),
})

3.然后将上面参数变成数组后传入就行

参考文章

js axious 前端 请求多个相同参数名传值get请求的参数包含中括号[]时，报错400