vue axios get post put 传参方法和路由传参&&接收参数方法&&qs的安装配置和使用 实例!!

get 、post、put、url/路由传参

**1路由传参:**

首先定义一个跳转方法
然后在methods中:

goPlatformDetails(task_uuid){
        this.$router.push({
          path:'/platformDetails',
          query:{
            task_uuid
          }
        })
      },

效果展示: http://localhost:8080/platformDetails?task_uuid=1
接收路由传递过来的参数方法如下

task_uuid:this.$route.query.task_uuid

注意:接收参数用的是 r o u t e 不 是 route 不是 routerouter

2.get向后台传参 :get方法接收路由传递过来的参数再次传参请求

axios.get('/api/v1.0/task/TaskDetail',{params:{task_uuid:this.$route.query.task_uuid}}).then((response)=>{
        if (response.status===200){
          this.detailTopArr=response.data;
        }

get传参还可以拼接到请求的url中,
例如:
/api/v1.0/task/TaskDetail+'?thask_uuid='+this.$route.query.task_uuid
但是个人觉得并不是很方便,还是喜欢params

3,post请求
post请求中我们使用qs 不知道这个的可以自行百度,这不是我们今天的主题
首先安装qs npm install qs --save
再看下我的配置文件 main.js

import axios from 'axios'
import qs from 'qs'

Vue.prototype.$qs = qs;

现在就可以开始在需要的页面调用了,最常见的就是提交表单

emitForm() {
        let params = this.$qs.stringify({
          'video_type':this.ruleForm.videoType,
          'sex':this.ruleForm.sex,
          'video_resolution':this.ruleForm.videoResolution,
          'describe':this.ruleForm.describe
        });
        axios.post('/api/v1.0/platform/do_video/',params).then((response)=>{
          if(response.status===200){
            this.$message({
              message:'提交成功',
              type:'success'
            })
          }
        }).catch(error=>{

将所有要提交的表单信息给params,然后在post请求中提交params
3,put请求

emitForget(){
        let params=this.$qs.stringify({
          'password': this.ruleForm.password,
        });
        axios.put('/api/v1.0/user/updatePassword/', params).then((response) => {
          if (response.status === 200) {
            this.$message({
              message:'密码修改成功',
              type:success
            });

put请求和post请求相同
vue axios get post put 传参方法和路由传参&&接收参数方法&&qs的安装配置和使用 实例!!_第1张图片

你可能感兴趣的:(axios)