Vue3 中如何使用 GET 请求传递复杂参数

1. 引言

在 Vue3 项目开发中，通过 GET 请求传递复杂参数（如对象、数组、嵌套结构）是常见的需求。由于 GET 请求的参数通常拼接在 URL 的查询字符串中，直接传递复杂对象往往无法被后端正确解析。本文将介绍几种在 Vue3 中传递复杂参数的实用方案。

2. 问题背景

GET 请求的 URL 长度有限，且查询字符串只能承载简单的键值对。当我们需要传递以下类型的复杂参数时，会遇到困难：

嵌套对象 ：如 { user: { name: '张三', age: 20 } }
数组：如 { ids: [1, 2, 3] }
对象数组 ：如 { list: [{ id: 1 }, { id: 2 }] }

3. 方案一：使用 qs 库序列化参数

最常用的方案是借助 qs 库将复杂对象序列化为查询字符串。首先安装依赖：

bash 复制代码

npm install qs

然后在请求工具中配置序列化方式。以 axios 为例：

javascript 复制代码

import axios from 'axios';
import qs from 'qs';

// 全局配置
axios.defaults.paramsSerializer = (params) => qs.stringify(params, { indices: false });

// 请求示例
const params = {
  user: { name: '张三', age: 20 },
  ids: [1, 2, 3]
};

axios.get('/api/search', { params })
  .then(response => console.log(response.data));

序列化后的 URL 大致为：

text 复制代码

/api/search?user[name]=张三&user[age]=20&ids=1&ids=2&ids=3

后端需要按照对应的格式解析（如 PHP 的 $_GET、Node.js 的 qs 中间件）。

4. 方案二：手动拼接查询字符串

如果不希望引入额外依赖，也可以手动将复杂对象转换为查询字符串。下面是一个简单的工具函数：

javascript 复制代码

function buildQuery(params, prefix = '') {
  return Object.entries(params)
    .flatMap(([key, value]) => {
      const fullKey = prefix ? `${prefix}[${key}]` : key;
      if (value !== null && typeof value === 'object') {
        return buildQuery(value, fullKey);
      }
      return [`${encodeURIComponent(fullKey)}=${encodeURIComponent(value)}`];
    })
    .join('&');
}

// 使用示例
const params = { user: { name: '张三' }, ids: [1, 2] };
const queryString = buildQuery(params);
// 结果：user[name]=%E5%BC%A0%E4%B8%89&ids=1&ids=2
const url = `/api/search?${queryString}`;

5. 方案三：使用 JSON 字符串作为参数

另一种思路是将复杂对象序列化为 JSON 字符串，作为单个参数传递。这种方式简单直接，但需要后端配合解析：

javascript 复制代码

const params = {
  data: JSON.stringify({ user: { name: '张三' }, ids: [1, 2, 3] })
};

axios.get('/api/search', { params })
  .then(response => console.log(response.data));

后端收到后通过 JSON.parse 还原对象。此方案的缺点是 URL 可读性较差，且参数长度受 URL 限制。

6. 方案对比与建议

方案	优点	缺点	适用场景
qs 库序列化	标准、灵活、支持嵌套	需要额外依赖	大多数项目，推荐使用
手动拼接	无依赖、可控性强	代码量较多，需处理边界	简单对象或少量参数
JSON 字符串	实现简单、通用	URL 可读性差、长度受限	参数结构复杂且量少

7. 注意事项

URL 长度限制：GET 请求的 URL 长度有限（不同浏览器和服务器限制不同），复杂参数过多时应考虑改用 POST 请求。
编码问题 ：中文和特殊字符必须进行 URL 编码，qs 库和 encodeURIComponent 会自动处理。
后端解析一致性：前端序列化方式必须与后端解析方式保持一致，否则参数无法正确还原。
安全性：GET 参数会出现在浏览器历史记录和服务器日志中，敏感信息不应通过 GET 传递。

8. 总结

在 Vue3 中传递复杂 GET 参数，推荐优先使用 qs 库进行序列化，它能够优雅地处理嵌套对象和数组。若项目对依赖敏感，可自行实现拼接工具函数。无论采用哪种方案，都要注意 URL 长度限制、参数编码以及前后端解析的一致性。