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();
      });
相关推荐
莫物13 小时前
vue过滤表格数据导致的索引错乱问题
前端·javascript·vue.js
Можно14 小时前
Vue 组件样式隔离完全指南:从原理到实战
前端·javascript·vue.js
英俊潇洒美少年14 小时前
Vue3 完整渲染流程(从 createApp → mount → update → unmount)
前端·javascript·vue.js
前端Hardy15 小时前
Pinia 比 Vuex 好用 10 倍?Vue3 状态管理终于不折磨人了!(新手复制即用)
前端·javascript·vue.js
前端Hardy15 小时前
Vue3 的 v-model 双向绑定,90% 的人都用错了?(附 2026 最新避坑指南)
前端·javascript·vue.js
前端Hardy15 小时前
救命!Vue3 的 Composition API,居然能让我少写 80% 冗余代码?(新手也能直接抄)
前端·javascript·vue.js
王霸天15 小时前
🚨 还在用 rem) 做大屏适配?用 vfit.js 一键搞定,告别改稿8版的噩梦!
前端·vue.js·数据可视化
Mr Xu_16 小时前
Vue3 + Leaflet实战:深入解析MarkerCluster点位聚合插件的使用与优化
前端·javascript·vue.js
源码宝16 小时前
使用 PHP(Laravel 8)+ Vue 2 + Element UI + MySQL 5.7开发一套医院不良事件系统的注意事项
vue.js·php·laravel
D_C_tyu16 小时前
Vue + Leaflet 实现地图任意点位点击查看时间功能
前端·javascript·vue.js