springboot接口如下：

package com.hkj.springboot.apiForVue.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author liujy
 * @description 測試接口
 * @since 2021-02-19 11:25
 */
@RestController
@RequestMapping("/test")
public class TestParamController {
    /**
     * 測試get請(qǐng)求PathVariable傳參
     */
    @GetMapping("/getPathVariable/{username}/{pwd}")
    public String testGetPathVariable(@PathVariable("username") String username, @PathVariable("pwd") String pwd) {
        String result = username + " " + pwd;
        System.out.println(result);
        return result;
    }

    /**
     * 測試get請(qǐng)求RequestParam傳參
     */
    @GetMapping("/getRequestParam")
    public String testGetRequestParam(@RequestParam("username") String username, @RequestParam("pwd") String pwd) {
        String result = username + " " + pwd;
        System.out.println(result);
        return result;
    }

    /**
     * 測試post請(qǐng)求RequestParam傳參
     */
    @PostMapping("/postRequestParam")
    public String testPostRequestParam(@RequestParam("username") String username, @RequestParam("pwd") String pwd) {
        String result = username + " " + pwd;
        System.out.println(result);
        return result;
    }

    /**
     * 測試post請(qǐng)求RequestBody傳參
     */
    @PostMapping("/postRequestBody")
    public String testPostRequestBody(@RequestBody TestUser testUser) {
        String result = testUser.getUsername() + " " + testUser.getPwd();
        System.out.println(result);
        return result;
    }

    /**
     * 測試post請(qǐng)求RequestParam饶辙、RequestBody混合傳參
     */
    @PostMapping("/postRequestParamRequestBody")
    public String testPostRequestParamRequestBody(@RequestParam("size") Integer size, @RequestBody TestUser testUser) {
        String result = size + " " + testUser.getUsername() + " " + testUser.getPwd();
        System.out.println(result);
        return result;
    }
}

TestUser model如下：

package com.hkj.springboot.apiForVue.controller;

import lombok.Getter;
import lombok.Setter;

/**
 * @author liujy
 * @description 實(shí)體
 * @since 2021-02-19 11:30
 */
@Getter
@Setter
public class TestUser {
    private String username;
    private String pwd;
}

vue測試頁面如下：

<template>
  <div class="base_container">
    <div class="flex_container">
      <button @click="testGetPathVariable">測試get請(qǐng)求PathVariable傳參</button>
      <button @click="testGetRequestParam">測試get請(qǐng)求RequestParam傳參</button>
      <button @click="testPostRequestParam">測試post請(qǐng)求RequestParam傳參</button>
      <button @click="testPostRequestBody">測試post請(qǐng)求RequestBody傳參</button>
      <button @click="postRequestParamRequestBody">測試post請(qǐng)求RequestParam炸卑、RequestBody混合傳參</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "test",
    data() {
      return {
        userParam: {
          username: 'zhangsan',
          pwd: '123',
          size: 0
        }
      }
    },
    methods: {
      //  get請(qǐng)求 PathVariable傳參
      async testGetPathVariable() {
        const {data} = await this.$axios.get(`/test/getPathVariable/${this.userParam.username}/${this.userParam.pwd}`);
        console.log("get請(qǐng)求 PathVariable傳參");
        console.log(data);
      },
      //  get請(qǐng)求 RequestParam傳參
      async testGetRequestParam() {
        const {data} = await this.$axios.get('/test/getRequestParam', {params: this.userParam});
        console.log("get請(qǐng)求 RequestParam傳參");
        console.log(data);
      },
      //  Post請(qǐng)求 RequestParam傳參
      async testPostRequestParam() {
        const formData = new FormData();
        formData.append('username', this.userParam.username);
        formData.append('pwd', this.userParam.pwd);
        // 方法1
        const {data: d1} = await this.$axios.post('/test/postRequestParam', formData);
        // 方法2
        const {data: d2} = await this.$axios.post(`/test/postRequestParam?username=${this.userParam.username}&pwd=${this.userParam.pwd}`);
        console.log("Post請(qǐng)求 RequestParam傳參");
        console.log(d1);
        console.log(d2);
      },
      //  Post請(qǐng)求 RequestBody傳參
      async testPostRequestBody() {
        const {data} = await this.$axios.post('/test/postRequestBody', this.userParam);
        console.log("Post請(qǐng)求 RequestBody傳參");
        console.log(data);
      },
      //  Post請(qǐng)求 RequestParam颤介、RequestBody混合傳參
      async postRequestParamRequestBody() {
        const {data} = await this.$axios.post(`/test/postRequestParamRequestBody?size=${this.userParam.size}`, this.userParam);
        console.log("Post請(qǐng)求 RequestParam票从、RequestBody混合傳參");
        console.log(data);
      }
    }
  }
</script>

<style scoped>
</style>

測試結(jié)果如下:

測試結(jié)果