vue前端如何向后端传递参数

下面是vue前端向后端传递参数的详细攻略：

一、GET请求传递参数

在使用GET请求时，我们可以将参数拼接在URL中，作为查询参数。如下面的示例：

axios.get('/api/user?id=123&name=张三')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

在上面的代码中，使用了axios库发送GET请求，同时将查询参数id和name拼接在了URL中。后端可以通过req.query对象获取这些参数。

另外，我们也可以使用params选项将参数以对象的形式传递给axios，如下面的示例：

axios.get('/api/user', {
    params: {
        id: '123',
        name: '张三'
    }
})
.then(function(response) {
    console.log(response);
})
.catch(function(error) {
    console.log(error);
});

在上面的代码中，将查询参数以对象的形式传递给了axios，此时查询参数会被拼接在URL中，效果和第一个示例一致。后端也可以通过req.query对象获取这些参数。

二、POST请求传递参数

在使用POST请求时，我们通常将参数放在请求体中，而不是URL中。axios库提供了两种方式来传递POST参数：一种是formData方式，另一种是json方式。下面分别介绍这两种方式：

1. formData方式

formData方式通常用于上传文件等场景。我们可以使用axios的post方法，将参数作为FormData对象的属性传递给post方法，如下面的示例：

var formData = new FormData();
formData.append('name', '张三');
formData.append('age', '18');

axios.post('/api/user', formData)
    .then(function(response) {
        console.log(response);
    })
    .catch(function(error) {
        console.log(error);
    });

在上面的代码中，我们创建了一个FormData对象，并将name和age参数添加到了对象中。然后将FormData对象作为第二个参数传递给了axios的post方法。后端可以通过req.body对象获取这些参数。

2. JSON方式

JSON方式通常用于一般的POST请求场景。我们可以将参数作为一个JavaScript对象传递给axios的post方法，并指定请求头的Content-Type为application/json，如下面的示例：

axios.post('/api/user', {
    name: '张三',
    age: 18
}, {
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(function(response) {
    console.log(response);
})
.catch(function(error) {
    console.log(error);
});

在上面的代码中，我们将参数作为JavaScript对象传递给了axios的post方法，并指定了请求头的Content-Type为application/json。后端可以通过req.body对象获取这些参数。

另外，如果你使用的是Vue的axios插件，同样可以使用post和get方法传递参数。示例代码可以参考以上内容。