vue如何使用 contentType: 'application/x-www-form-urlencoded',传递给后端

在Vue中使用contentType: 'application/x-www-form-urlencoded'传递给后端，可以使用axios库来发送POST请求，并在请求头中设置Content-Type为'application/x-www-form-urlencoded'。具体步骤如下：

1. 安装axios库：在终端中输入命令npm install axios --save安装axios库。

2. 在Vue组件中引入axios库：在需要发送POST请求的Vue组件中，使用import axios from 'axios'引入axios库。

3. 在发送POST请求时，设置请求头的Content-Type为'application/x-www-form-urlencoded'：在发送POST请求时，使用axios.post(url, data, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})来设置请求头的Content-Type为'application/x-www-form-urlencoded'。

4. 将请求数据转换为URL编码格式：在发送POST请求时，需要将请求数据转换为URL编码格式，可以使用qs库来实现。在需要使用qs库的Vue组件中，使用import qs from 'qs'引入qs库。然后在发送POST请求时，使用axios.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})来将请求数据转换为URL编码格式。

范例代码如下：

<template>
  <div>
    <button @click="postData">发送POST请求</button>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'

export default {
  methods: {
    postData() {
      const url = 'http://example.com/api'
      const data = {
        name: 'John',
        age: 30
      }
      axios.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>