Vue使用axios发送get请求并携带参数

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

前言

其实关于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)
          })
      },