Vue中Axios请求参数序列化需按请求类型和Content-Type区分：GET用params自动编码，复杂结构需qs；POST/PUT中JSON数据自动序列化，表单数据需qs或URLSearchParams，FormData自动处理；手动编码仅在自定义场景用encodeURIComponent。
Vue 项目中用 Axios 发送请求时，参数怎么序列化、特殊字符（比如空格、中文、斜杠、& 等）怎么正确转义，直接关系到后端能否完整、准确地收到数据。核心在于区分请求类型（GET/POST/PUT/DELETE）和数据格式（URL 查询参数、表单提交、JSON 提交），并匹配对应的 Content-Type 和序列化方式。
GET 请求：params 自动序列化，但嵌套/数组需注意
GET 的参数走 URL 查询字符串，Axios 默认使用 params 配置项，并内置了基础的 URL 编码（类似 encodeURIComponent）。对普通对象有效：
-
axios.get('/user', { params: { name: '张三', city: '北京 上海' } })→ URL 变成/user?name=%E5%BC%A0%E4%B8%89&city=%E5%8C%97%E4%BA%AC+%E4%B8%8A%E6%B5%B7，空格和中文都已编码 - 但默认不支持深度嵌套或数组展开（如
{ filter: { status: [1,2], tags: ['a','b'] } }），会生成?filter=[object Object]这种无效结果 - 需要复杂结构时，可引入
qs库：npm install qs，然后全局配置：axios.defaults.paramsSerializer = params => qs.stringify(params, { arrayFormat: 'brackets' })
POST/PUT 请求：根据 Content-Type 决定序列化方式
不是所有 POST 都一样。后端接口约定哪种格式，前端就必须发哪种，不能只靠 data 字段“随便传”：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
-
发 JSON 数据（最常用）：Content-Type 是
application/json，data 直接传对象，Axios 自动调用JSON.stringify()，无需手动处理转义 —— 中文、引号、反斜杠都会被 JSON 标准正确编码 -
发表单数据（x-www-form-urlencoded）：Content-Type 是
application/x-www-form-urlencoded，此时 data 必须是字符串（如key1=val1&key2=val2）或URLSearchParams实例；若传对象，需手动序列化（如用qs.stringify()或自己遍历 +encodeURIComponent） -
发 FormData（文件上传）：Content-Type 自动设为
multipart/form-data，data 用new FormData()，append 字段，浏览器自动处理编码和边界，不用干预
手动控制转义：什么时候该自己写 encodeURIComponent？
一般不需要手写，除非你绕过 Axios 默认行为，比如拼接 URL 或构造原始字符串参数：
立即学习“前端免费学习笔记（深入）”；
- 在
transformRequest中自定义表单序列化时，必须对每个 key 和 value 单独encodeURIComponent()，否则空格、中文、&、= 等会破坏 URL 结构 - 拼接 GET URL 字符串（不推荐）：
axios.get(`/api/search?q=${encodeURIComponent(query)}`)—— 这种写法容易漏掉编码，不如交给params - 注意：
encodeURI()和encodeURIComponent()不同，前者不编码/ ? : @ & = + $ , #，后者更严格，适合参数值编码
避免常见坑：Content-Type 与 data 类型必须匹配
很多乱码、参数收不到、400 错误，根源都是这组不一致：
- 写了
{ headers: { 'Content-Type': 'application/json' } }，但 data 传的是字符串（如'{"name":"test"}'）—— Axios 会再套一层 JSON.stringify，变成"{\"name\":\"test\"}"，后端解析失败 - 写了
application/x-www-form-urlencoded，但 data 传的是普通对象 —— Axios 默认当 JSON 处理，后端收不到键值对 - 解决方案：要么删掉 headers 让 Axios 自动推断，要么确保 data 类型与 header 完全对应（JSON 对象 ↔ application/json；URLSearchParams 或字符串 ↔ x-www-form-urlencoded）
