axios的传参方式

在使用 Axios 发送 HTTP 请求时,有三种常见的传参方式:dataparams 和路径参数

1、data传参

javascript 复制代码
  this.$axios({
     method: "post",
     url: "http://localhost:8080/api/user/login",
     data: {
             userId: this.userId,
             password: this.password,
          },
   })
    .then((res) => {
      console.log(res);
  })
  .catch(error => {
    console.error(error);
  });

2、使用 params 传递查询参数:

javascript 复制代码
axios.get('/api/users', {
  params: {
    page: 1,
    limit: 10
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

params参数通常用于GET请求中添加查询参数,而对于POST请求,一般使用data参数来传递请求体数据。

3、使用路径参数传递数据:

javascript 复制代码
 deleteUser(userId) {
      this.$axios({
        method: 'post',
        url: 'http://localhost:8080/api/user/deleteUser/' + userId,
      }).then((res) => {
        //显示删除成功
        this.$message({
          message: res.data.message,
          type: "success",
        });
        //刷新表格数据
        this.userAll();
      });
相关推荐
柯南952737 分钟前
Vue 3 响应式系统源码解析
vue.js
文艺理科生1 小时前
Nuxt.js入门指南-Vue生态下的高效渲染技术
前端·vue.js·nuxt.js
夏小花花1 小时前
vue3 ref和reactive的区别和使用场景
前端·javascript·vue.js·typescript
前端小巷子2 小时前
Vue 自定义指令
前端·vue.js·面试
Stringzhua3 小时前
Vue中的数据渲染【4】
css·vue.js·css3
草梅友仁13 小时前
草梅 Auth 1.4.0 发布与 ESLint v9 更新 | 2025 年第 33 周草梅周报
vue.js·github·nuxt.js
萌萌哒草头将军15 小时前
Oxc 最新 Transformer Alpha 功能速览! 🚀🚀🚀
前端·javascript·vue.js
武昌库里写JAVA15 小时前
JAVA面试汇总(四)JVM(一)
java·vue.js·spring boot·sql·学习
littleding16 小时前
Vue3之计算属性
前端·vue.js
Juchecar16 小时前
采用 Vue 3 实现单页应用(SPA)与本地数据存储方案
前端·javascript·vue.js