必须主动控制序列化方式：GET用qs.stringify配置indices处理数组，JSON字符串化对象；POST表单用qs.stringify并设application/x-www-form-urlencoded头，JSON格式则直接传对象并确保Content-Type为application/json。
Vue 中用 Axios 发送请求时，遇到数组或嵌套对象这类复杂查询参数，直接传入容易导致格式错乱、后台收不到、或解析失败。核心在于：**不能依赖默认行为，得主动控制序列化方式**。
GET 请求中处理数组和对象参数
GET 请求的参数走 URL 查询字符串（query string），Axios 默认会把数组转成 ids=1&ids=2，把对象扁平为 user[name]=Alice&user[age]=25。但某些后端要求更严格，比如要 ids[]=1&ids[]=2 或统一 JSON 字符串形式。
- 安装并引入
qs：npm install qs，然后在请求配置里用paramsSerializer - 对数组启用索引模式（如
tags[]=a&tags[]=b）：paramsSerializer: params => qs.stringify(params, { indices: true }) - 若需把整个对象当一个字段传（比如过滤条件包成 JSON），可先
JSON.stringify再作为字符串传：params: { filter: JSON.stringify({ status: 'active', range: [10, 100] }) }
POST 请求中传复杂对象或数组（表单格式）
当后端接收 application/x-www-form-urlencoded 类型时，不能直接传 JS 对象——Axios 默认会发成 JSON，而表单接口只认键值对。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 用
qs.stringify手动序列化整个data： - 设置请求头：
headers: { 'Content-Type': 'application/x-www-form-urlencoded' } - 示例：
data: qs.stringify({<br> id: '1001',<br> items: ['a', 'b'],<br> config: { theme: 'dark', lang: 'zh' }<br>})
结果是：id=1001&items[0]=a&items[1]=b&config[theme]=dark&config[lang]=zh
POST 请求中传复杂对象（JSON 格式）
如果后端明确接收 application/json，那就保持原生对象结构，无需序列化，但要注意：Axios 默认已做 JSON.stringify，你只需确保 Content-Type 正确。
立即学习“前端免费学习笔记（深入）”；
- 不设
transformRequest，也不用qs - 直接传对象：
data: { id: '1001', items: ['a','b'], config: { theme: 'dark' } } - 确保 header 是：
'Content-Type': 'application/json'（Axios 默认就是这个，一般不用显式写）
避免踩坑的关键细节
不同场景下，同一个参数可能被序列化出完全不同的结果，稍不注意就 400。
-
不要混用：GET 的
params和 POST 的data是两套逻辑，别把对象同时塞进两者 -
中文/特殊字符必须编码：qs 默认会 encode，但手动拼接或用
JSON.stringify后再拼接时，记得用encodeURIComponent包一层 -
空数组、null、undefined 的表现不同：qs 默认忽略
null，可配skipNulls: false；空数组默认生成arr[]=，可用arrayFormat: 'brackets'控制 -
IE 缓存问题：GET 请求加时间戳防缓存，推荐用
params: { t: Date.now() }，而不是手动拼 URL
