Vue之请求如何传递参数

当我们通过Vue进行请求时，有时需要把一些参数传递给后端接口。在这里，我们可以采用两种方式来传递参数。下面将分别详细介绍这两种方式。

通过URL传递参数

通常，我们可以把参数直接拼接在请求的URL末尾，比如：

axios.get('/api/user?id=1')
  .then(function (response) {
    console.log(response);
})

在上面的例子中，我们通过拼接?id=1来传递参数。

我们也可以通过params选项来传递参数。这里的params的作用就是把参数拼接在URL上面。例如：

axios.get('/api/user', {
  params: {
    id: 1
  }
}).then(function (response) {
    console.log(response);
})

在这里，我们把参数以对象的形式传递到了params选项中。

通过请求体传递参数

除了可以通过URL传递参数以外，我们还可以把参数放到请求体中。在这种情况下，我们需要使用data选项来定义请求体的数据。例如：

axios.post('/api/user', {
  id: 1,
  name: 'Tom'
}).then(function (response) {
    console.log(response);
})

在这里，我们把id和name参数放到了请求体中。需要注意的是，当使用POST请求时， axios默认会把Content-Type设置为application/json，因此在后端接口中也需要对应地解析请求体数据。

至此，我们已经介绍了如何通过Vue进行请求时传递参数的两种方式。根据具体的需求，我们可以灵活地使用这两种方式之一。

下面是一些使用示例：

通过URL传递参数示例

axios.get('/api/user?id=1')
  .then(function (response) {
    console.log(response);
})

axios.get('/api/user', {
  params: {
    id: 1
  }
}).then(function (response) {
    console.log(response);
})

通过请求体传递参数示例

axios.post('/api/user', {
  id: 1,
  name: 'Tom'
}).then(function (response) {
    console.log(response);
})