Vue 3 中 Axios 默认数组参数序列化不满足多数后端需求，需用 qs 库配置 paramsSerializer 实现 brackets/indices/comma/repeat 等格式；支持嵌套对象与数组，POST 表单也适用；轻量场景可用 URLSearchParams 手动处理。
Vue 3 中 Axios 默认对数组参数的 URL 查询序列化支持有限，比如 { ids: [1, 2, 3] } 直接传给 params 会变成 ?ids=1&ids=2&ids=3（部分后端可接受），但更多场景需要 ?ids[]=1&ids[]=2&ids[]=3 或 ?ids[0]=1&ids[1]=2&ids[2]=3 等格式。要统一、可控地处理这类需求，必须配置自定义参数序列化器。
用 qs 库统一处理嵌套与数组
qs 是最常用、最可靠的序列化工具，能精准控制数组和对象的展开方式：
- 安装：
npm install qs - 在 Axios 实例创建时配置：
import axios from 'axios';<br>import qs from 'qs';<br><br>const request = axios.create({<br> baseURL: '/api',<br> paramsSerializer: params => qs.stringify(params, {<br> arrayFormat: 'brackets', // 生成 ids[]=1&ids[]=2<br> encode: true<br> })<br>}); - 支持的
arrayFormat值：
brackets →ids[]=1&ids[]=2
indices →ids[0]=1&ids[1]=2
repeat →ids=1&ids=2（默认行为）
comma →ids=1,2（需后端明确支持）
GET 请求中直接使用带格式的 params
配置生效后，所有 GET 请求的 params 都会按规则自动序列化：
-
request.get('/users', { params: { status: 'active', tags: ['vue', 'axios'] } })
→ 生成/users?status=active&tags[]=vue&tags[]=axios - 嵌套数组也有效：
{ filter: { ids: [101, 102], roles: ['admin', 'user'] } }
→?filter[ids][]=101&filter[ids][]=102&filter[roles][]=admin&filter[roles][]=user
POST 表单提交时同样适用 qs
当 POST 的 Content-Type 是 application/x-www-form-urlencoded 时，data 也要序列化为字符串：
- 手动调用：
request.post('/login', qs.stringify({ username: '张三', roles: ['dev'] }), {<br> headers: { 'Content-Type': 'application/x-www-form-urlencoded' }<br>}) - 也可将
qs.stringify提前封装进请求拦截器，避免每次重复写
不依赖 qs 的轻量替代方案
若项目极简、仅需基础数组支持，可用原生 URLSearchParams（但不支持嵌套）：
paramsSerializer: params => {<br> const sp = new URLSearchParams();<br> Object.keys(params).forEach(key => {<br> const val = params[key];<br> if (Array.isArray(val)) {<br> val.forEach(v => sp.append(key + '[]', v));<br> } else {<br> sp.append(key, val);<br> }<br> });<br> return sp.toString();<br>}
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
