必须主动控制序列化方式：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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！