vue项目中使用axios发送get传参

新手项目GET请求问题
最新推荐文章于 2025-10-27 21:32:37 发布
原创 最新推荐文章于 2025-10-27 21:32:37 发布 · 3.1k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

作为新手写项目总是遇到各种问题，虽然在解决之后觉得会很简单，但是还是想记录下来，一方面避免自己下一次犯同样的错误，另一方面，希望遇到和我相同问题的朋友能够在第一时间得到解决。
项目目录
在这里插入图片描述
首先，是在utils目录下的request.js中封装了axios，在api目录下进行导入发送get请求。（我就是在发送get请求时传参出现的问题）
这里的params是一个对象，所以不能直接传到url之后
然后在store中引入api中的方法，将请求到的数据放在store中进行处理。
在这里插入图片描述
这里可以在getters中对state中的totalData再进行处理，得到自己想要在.vue中使用的数据，然后通过mapGetters辅助函数在.vue文件中进行解构使用
queryParams就是要传递给api请求中的参数，在created中调用了store中的getSysLogAdmin方法，将参数传递给到了store中的payload上，最后由store将参数传递到api中
*over *

vue3【使用axios并封装axios请求】
蜗牛~~
05-12 3854
由于 Vue3中，在setup中无法通过this获取组件实例，console.log(this)打印出来的值是undefined。1、我们可以通过window.location.protocol和window.location.host获取协议和主机ip端口，然后统一设置axios的默认请求baseURL。来绑定的，例如 Vue.prototype.$toast = Toast。proxy是getCurrentInstance()对象中的一个属性，然后通过对象的解构赋值方式拿到proxy。
【Vue】Axios的get/post请求params/data传参总结
热门推荐
Ryoujou的博客
12-24 2万+
axios的基本使用get/post入门
vue中axios GET传参
weixin_42138420的博客
07-06 811
VUE中axios的get传参用的是params而不是data
Axios的五种方法
最新发布
2401_88363404的博客
10-27 598
服务器上的已有资源（只需提供需要修改的字段），是 “更新” 操作。服务器上的已有资源（需提供资源的完整信息），是 “更新” 操作。无长度限制，可传递大量数据（如表单、JSON、文件等）。请求参数放在请求体（body）中，不可见（相对安全）。（多次执行相同请求，结果相同，不会改变服务器状态）。（多次执行相同请求，结果相同，最终服务器状态一致）。局部更新资源（如只修改用户的年龄，其他信息不变）。（多次删除同一资源，最终结果相同：资源不存在）。删除指定资源（如删除用户、删除订单、删除评论）。
vue中axios传参
weixin_44464373的博客
06-04 3504
安装 npm install axios --save 安装 main.js配置 文件中使用 methods: { findStudentGradeList () { this.$axios.post('/api/student/findStudentGradeList', this.studentGrade, {headers: {'content-Ty...
Vue ：axios请求post、get请求根据后参数类型进行传参
2401_84187537的博客
04-07 4069
技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！忘了，建议回去补一下。一个人可以走的很快，但一群人才能走的更远。
Vue.js之使用axios进行get、post传参
Seven
03-21 9621
axios 定义 基于Promise的HTTP客户端，用于浏览器和node.js 特征 做的XMLHttpRequest从浏览器 让HTTP从node.js的请求 支持Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防范XSRF 安装 三种方式，均可进行 $ npm install axios //使用npm $ bower in...
解决vue处理axios post请求传参的问题
08-27
在 Vue 项目中使用 Axios 非常简单。首先，需要安装 Axios 库： ``` npm install axios ``` 然后，在 Vue 组件中引入 Axios： ``` import axios from 'axios' ``` 现在，您可以使用 Axios 发送 HTTP 请求。例如，...
vuecli3使用axios发送请求到后端获取token详解
juvialoxer的博客
07-10 2945
1.安装axios $ npm install axios $ npm install vue-axios 2.在mian.js中添加如下代码 import axios from 'axios' import VueAxios from 'vue-axios' import Qs from 'qs' Vue.use(VueAxios,axios,Qs) 3.在创建好的vuecli3项目的根...
vue2 如何利用axios去进行传参，后如何接收参数
03-13
在Vue2中使用Axios发送请求并传递参数的方法如下，分为GET和POST两种请求方式说明： --- ### 一、GET请求参数传递 1. **查询字符串形式** 直接在URL后添加参数，适用于简单参数： ```javascript this.$axios....
在axios中使用params传参的时候传入数组的方法
10-17
在本篇文章中，我们将探讨如何在axios中使用`params`正确地传递数组。 首先，我们需要了解`params`的默认行为。在axios中，当传递的对象属性值为数组时，它会被转换为以逗号分隔的字符串，而不是保持其数组结构。...
Vue和Axios的传参方式
sungancd的博客
07-30 5319
Vue和axios的传参方式： Vue的传参方式: 1.通过name来传递参数 在router下的index.js { path: '/hello', name: 'HelloWorld', component:HelloWorld, }, 在外部的对应的.vue中可以获取值 <h2>{{$route.name}}</h2> 2.通过v-bind:to的方式进行传参 name绑定跳转页面的名称 ，采取params:{key:value}
VUE中axios的get、post请求传参方式
瘾丶病的博客
08-02 8468
一、get请求 下面展示一些 内联代码片。 方法一： axios.get('/user?id=12345&name=user') .then(function (res) { console.log(res); }) .catch(function (err) { console.log(err); }); 方法二：
VUE3中axios参数传递
easyboot的专栏
04-04 880
await axios.get(webapiAddr + `PLC_MITSUBISHI/Connect`, { //params参数必写 , 如果没有可传参数，传{}以。
Vue使用axios发送get请求并携带参数
见证自己学习,成长的记录
02-01 1万+
其实关于Vue使用axios发送get请求并携带参数，我之前写过一篇，但是昨天又发现了另外一种方式，所以就单独写一篇进行总结。之前写的那篇使用get请求并携带参数都是使用的字符串拼接的方式感兴趣可以参考：Vue使用axios进行get请求拼接参数的两种方式关于如何使用安装下载axios，我之前也写过，感兴趣的话可以看看。
axios.get请求传参方式
BroRiver
10-17 4864
GET 请求中的数据通常通过查询参数（query parameters）传递，而不是在请求体中传递。
基于vue-cli的vue项目之axios的使用3--get传参请求
胡世林的博客
09-08 1万+
以get传参请求为例子， 1.配置config/index.js:解决跨域问题 dev: { env: require('./dev.env'), port: 8008, autoOpenBrowser: false, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/ajaxu
axios get传参
weixin_40716269的博客
08-23 741
属性，Axios 会将这些数据作为查询字符串附加到 URL 上。然而，从 0.27.0 版本开始，Axios 引入了一些变化，特别是关于。是一个对象，并且你想要将其作为查询字符串发送，你应该将其转换为查询字符串格式。是一个新引入的辅助函数，用于将 JavaScript 对象转换为。在 Axios 0.27.0 及更高版本中，如果你尝试在。在 Axios 0.27.0 版本之前，如果你在。转换为查询字符串，并在请求头中指定。请求的 JSON 数据，你可以将。请求的查询字符串的属性。：在 Axios 中，
vue3 axios get传参
10-16
在 Vue 3 中使用 Axios 进行 GET 请求时，可采用以下几种传参方法： ### 直接拼接参数到 URL 将参数直接拼接到 URL 中，用 `?` 和 `&` 连接。示例代码如下： ```javascript import axios from 'axios'; axios.get('/user?id=12345&name=user') .then(function (res) { console.log(res); }) .catch(function (err) { console.log(err); }); ``` 这种方式适合参数较少的情况，直观且简单，但当参数较多时，URL 会变得冗长，不易维护 [^3]。 ### 使用 `params` 对象 通过 `params` 对象传递参数，Axios 会自动将其转换为查询字符串并附加到 URL 上。示例代码如下： ```javascript import axios from 'axios'; axios.get('url', { params: { id: '接口配置参数（相当于url?id=xxxx）', }, }) .then((res) => { console.log(res); // 处理成功的函数 }) .catch((error) => { console.log(error); // 错误处理 }); ``` 这种方式代码更清晰，适合参数较多的情况，便于管理和维护 [^2]。 ### 处理数组参数（使用 `paramsSerializer`） 若参数包含数组，可使用 `paramsSerializer` 来自定义参数序列化方式。示例代码如下： ```javascript import axios from 'axios'; import qs from 'qs'; const params = { ids: [1, 2, 3] }; axios.get('url', { params: params, paramsSerializer: function(params) { return qs.stringify(params, { arrayFormat: "repeat" }); }, }) .then(res => { console.log(res); }) .catch(err => { console.log(err); }); ``` 此方法可确保数组参数以正确的格式传递给服务器 [^5]。 ### Axios 版本差异 在 Axios 0.27.0 版本之前，若在 GET 请求中包含 `data` 属性，Axios 会将这些数据作为查询字符串附加到 URL 上。但从 0.27.0 版本开始，Axios 对 GET 请求和 `data` 属性的处理有了变化 [^4]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

计算机软件bs辅导

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值