位置: IT常识 - 正文
Vue使用axios发送get请求并携带参数(vue发送数据)
编辑：rootadmin推荐整理分享Vue使用axios发送get请求并携带参数(vue发送数据)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue发送数据,vue中的axios如何实现,vue发送axios请求,vue发送请求的几种方式,vue发送数据,vue发送axios请求,vue发送数据,vue发送axios请求,内容如对您有帮助，希望把文章链接给更多的朋友！
其实关于Vue使用axios发送get请求并携带参数，我之前写过一篇，但是昨天又发现了另外一种方式，所以就单独写一篇进行总结。
之前写的那篇使用get请求并携带参数都是使用的字符串拼接的方式
感兴趣可以参考： Vue使用axios进行get请求拼接参数的两种方式
关于如何使用安装下载axios，我之前也写过，感兴趣的话可以看看。
前台传参这里我有一个业务场景，登录的时候需要把输入的账号和密码传递给后端：
这里前后端没做加密逻辑，只是为了举例子解释说明！正常是要加密的，不能是要明文密码登录！
前端传递的时候，可以借助axios的params属性：
注意:axios的回调函数,一定要使用箭头函数,不然this的指向不是vue示例
相关代码如下：
login(){ axios.get('http://localhost:9090/user/login', { // 传递的参数 params: { // 账号 account:this.formLogin.account, // 密码 password:this.formLogin.password, // 测试参数 testParam:'hello world' } // 回调函数,一定要使用箭头函数,不然this的指向不是vue示例 }).then(res =>{ // 如果状态为400,说明登录失败 if(res.data.status===400){ // 登录失败提示 this.$message({showClose: true, message: '登录失败,请检查账号和密码！',type: 'error', duration:2000,center:true}); }else{ // 登录成功提示 this.$message({showClose: true, message: '登录成功！',type: 'success', duration:2000,center:true}); // 跳转到首页路由 this.$router.push("/main/home"); } }).catch(error =>{ console.log(error) }) },可以通过控制台查看完整的get请求：
http://localhost:9090/user/login?account=wyh19991101&password=123456&testParam=hello+world
也可以通过控制台查看传递的参数：
后台接参前台代码以及写完了，再看下后台是否可以正常接收吧
可以发现，也是没有任何问题的。
这样就完成了一个简单的使用axios发送get请求并携带参数的方式了。并且涉及到前后端交互。
上一篇：处于美轮美奂的光影中的圣米歇尔山 (© Mathieu Rivrin/Getty Images)(美轮美奂的对象是什么)
下一篇：Uni-app + Vue3 + TS +Vite 创建项目
