vue3 get接口传参传空字符串传被过滤

在Vue3中，如果你尝试通过`v-model`或者`props`传递一个空字符串给组件，并且该组件内部有某种形式的数据验证或过滤，可能会遇到值被“过滤”掉的情况。例如，一些表单验证可能会忽略空值，或者是默认的前端框架处理像URL这样的属性时自动转换了空字符串。 举个例子，假设有一个组件接收一个地址字段： ```html <template> <input v-model="address" placeholder="请输入地址"> </template> <script> export default { props: { address: { type: String, required: false } }, computed: { filteredAddress() { // 如果地址为空字符串，这里可能会返回null或者其他处理后的值 return this.address.trim() || ''; } } } </script> ``` 在这个组件里，如果用户没有输入任何内容直接提交，`filteredAddress`计算属性会返回空字符串或者空格去除后的空白字符串，而不是原始的空字符串。因此，你应该在使用前检查`filteredAddress`是否确实为期望的空值。

<think>嗯，用户问的是关于axios的GET请求传参。我得先回忆一下axios的基本用法，特别是GET请求的参数传递方式。首先，GET请求通常有两种传参方式：URL参数和params对象。 首先，URL参数的话，可以直接在URL后面拼接查询字符串，比如`/api/user?id=123`。然后通过axios.get(url)来发送。这种方法简单，但参数多的时候可能不太方便，也容易出错。 然后，更常见的是使用params对象。在axios.get中，第二个参数可以传入一个配置对象，里面指定params字段。比如： axios.get('/api/user', { params: { id: 123, name: 'John' } }); 这样axios会自动把params对象转换成查询字符串，附加到URL后面。生成的URL就是`/api/user?id=123&name=John`。这种方式更清晰，尤其是参数多的时候，而且方便动态添加参数。 接下来，可能需要处理特殊字符的情况。比如参数值里有空格或者特殊符号，axios会自动进行URL编码，转换成%20这样的格式，所以用户一般不需要手动处理。不过，如果有特殊情况需要自己处理，可能需要用encodeURIComponent，但通常不需要。 还有，如果遇到数组参数的情况，比如ids=[1,2,3]，默认情况下axios会把它们转换成ids=1&ids=2&ids=3。但有时候后端可能需要不同的格式，比如ids=1,2,3，这时候可能需要自定义序列化函数。这时候可以用paramsSerializer配置项，自定义参数的序列化方式。 另外，用户可能会问关于缓存的问题。GET请求默认会被浏览器缓存，如果想避免，可以在参数里加一个时间戳或者随机数，比如`_t=${Date.now()}`，这样每次请求的URL都不同，避免缓存。 还有错误处理的部分，虽然用户没问，但可能也是相关的。使用.catch或者try/catch来处理可能的错误，比如网络问题或者参数错误。 可能需要提到的是，params对象中的参数值可以是字符串、数字、布尔值，甚至是null或undefined，后者会被忽略，不会发送到服务器。 最后，举几个例子，说明不同的传参方式，比如基本用法、数组处理、特殊字符的情况，以及如何防止缓存。这样用户能更直观地理解。 需要检查是否有遗漏的情况，比如POST和GET的区别，但用户明确问的是GET，所以不用涉及POST。还有params配置在axios实例中的使用，但可能属于进阶内容，暂时不提。 总的来说，结构应该是先介绍两种主要方式，然后详细说明params对象的用法，处理特殊情况和数组，最后给出示例。这样用户能一步步了解如何正确传递参数。</think>Axios 的 GET 请求传参主要通过以下两种方式实现，以下是逐步说明： --- ### 一、URL 直接拼接参数 **适用场景**：参数简单且固定时 **语法示例**： ```javascript axios.get('/api/user?name=John&age=20') .then(response => console.log(response)) .catch(error => console.error(error)) ``` **特点**： - 参数直接写在 URL 中，形如 `?key1=value1&key2=value2` - 需自行处理特殊字符的 URL 编码（如空格需转为 `%20`） --- ### 二、通过 `params` 配置项传参（推荐） **适用场景**：动态参数或参数较多时 **语法示例**： ```javascript axios.get('/api/user', { params: { name: 'John', age: 20, filters: ['admin', 'verified'] // 数组参数会自动转为 key[]=value1&key[]=value2 } }) ``` **实际请求 URL**： $$/api/user?name=John&age=20&filters[]=admin&filters[]=verified$$ --- ### 三、特殊场景处理 #### 1. 参数含特殊字符 Axios 自动对参数值进行 URL 编码： ```javascript params: { search: 'vue&react' } // 自动转为 search=vue%26react ``` #### 2. 空值参数处理 默认会过滤 `null` 和 `undefined`： ```javascript params: { status: null } // 参数不会被发送 ``` #### 3. 自定义序列化 通过 `paramsSerializer` 处理复杂参数格式： ```javascript axios.get('/api/data', { params: { ids: [1, 2, 3] }, paramsSerializer: params => qs.stringify(params, { arrayFormat: 'comma' }) }) // 生成 URL: /api/data?ids=1,2,3 ``` --- ### 四、防止缓存技巧 添加时间戳参数避免浏览器缓存： ```javascript params: { _t: Date.now() // 每次请求生成唯一时间戳 } ``` --- ### 完整示例 ```javascript axios.get('https://api.example.com/data', { params: { page: 1, pageSize: 10, sortBy: 'date', query: 'axios tutorial' }, paramsSerializer: params => qs.stringify(params, { indices: false }) }) .then(response => console.log(response.data)) .catch(error => console.error('Request failed:', error)); ``` --- ### 关键点总结 1. **优先使用 `params` 配置**：代码更清晰且自动处理编码 2. **数组参数默认格式**：`key[]=value1&key[]=value2` 3. **需安装 `qs` 库**（若需自定义序列化）：`npm install qs` 实际开发中，90% 的场景通过 `params` 配置即可满足需求，复杂参数格式可通过 `paramsSerializer` 灵活扩展。