vue使用get传递数组类型的参数为什么会一直在url拼接

在使用Vue进行get请求时，如果传递的参数是数组类型，会默认将其拼接到url中，这是因为在HTTP协议中，get请求传递参数是通过url传递的，而url只能传递字符串类型的参数。为了解决这个问题，可以使用将数组参数转换成JSON字符串，然后在后端通过解析JSON字符串获取数组参数的方式来传递数组类型的参数。或者使用POST请求方式传递参数，POST请求不会将参数拼接到url中。例如，可以使用axios库进行POST请求：

axios.post('/api/example', { params: { arrayParam: [1, 2, 3] } })

相关问题

前端vue get请求 传 数组

在Vue前端中进行GET请求传递数组可以通过以下方式实现：

1. 在URL中传递数组参数：将数组参数拼接为字符串，然后将其作为URL的一部分传递。例如，如果要传递一个名为"ids"的数组参数，可以将其转换为字符串，并在URL中添加查询参数。示例代码如下：

const ids = [1, 2, 3];
const params = new URLSearchParams();
params.append('ids', ids.join(','));

axios.get('/api/data?' + params)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在服务器端，你可以解析URL中的查询参数，并将其转换回数组。

2. 在请求体中传递数组参数：对于复杂的参数，可以将其放在请求体中传递，而不是拼接在URL中。这需要使用POST请求而不是GET请求。示例代码如下：

const ids = [1, 2, 3];

axios.post('/api/data', { ids })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在服务器端，你可以通过解析请求体来获取传递的数组参数。

请注意，如果你要在URL中传递数组参数，请确保对数组进行适当的编码和解码，以避免特殊字符或空格引起的问题。

vue中get请求怎么传数组

### 回答1：
在Vue中，可以使用axios库或者Vue-resource来发送get请求。无论使用哪种库，传递数组的方法是一样的。

1. 使用axios发送get请求：

   import axios from 'axios';

   axios.get('/api/data', {
     params: {
       arr: [1, 2, 3]  //将数组作为参数传递给params对象中的arr属性
     }
   }).then(response => {
     console.log(response.data);
   }).catch(error => {
     console.log(error);
   });

2. 使用Vue-resource发送get请求：

   import Vue from 'vue';
   import VueResource from 'vue-resource';

   Vue.use(VueResource);

   Vue.http.get('/api/data', {
     params: {
       arr: [1, 2, 3]  //将数组作为参数传递给params对象中的arr属性
     }
   }).then(response => {
     console.log(response.body);
   }).catch(error => {
     console.log(error);
   });

上述代码中，将数组作为参数传递给`params`对象中的`arr`属性，当发送get请求时，会自动将数组转换为`arr=1&arr=2&arr=3`的形式进行传输。在服务器端接收到请求时，可以通过获取对应参数的值来获取传递的数组。

### 回答2：
在Vue中，我们可以使用axios库来进行网络请求。当我们需要传递数组作为GET请求的参数时，可以通过拼接URL的方式将数组传递给后端。

首先，我们需要将数组转换为字符串形式。可以使用join()方法将数组元素连接为一个字符串，同时在每个元素之间添加逗号分隔符。例如，如果数组为[1, 2, 3]，可以通过arr.join(',')得到"1,2,3"。

接下来，使用axios库发送GET请求，可以通过在URL中添加参数的方式传递数组。例如，假设我们要传递名为"numbers"的数组参数，可以通过以下方式构建URL：

axios.get('/api/data', {
  params: {
    numbers: arr.join(',')
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.log(error);
});

在上述代码中，我们通过params选项传递参数，并将数组转换为字符串形式后作为numbers参数的值。在后端接收到请求时，可以通过解析URL参数来得到传递的数组。

总结起来，要在Vue中通过GET请求传递数组，我们需要将数组转换为字符串，并在URL中以参数的形式传递给后端。

### 回答3：
在Vue中进行get请求传递数组参数，可以使用以下两种方式：

1. 通过在URL中以查询字符串的形式传递数组参数。示例代码如下：

// 定义要传递的数组参数
const arr = [1, 2, 3];

// 使用axios进行get请求
axios.get('/api/path', {
  params: {
    arr: arr.join(',')  // 将数组转换为逗号分隔的字符串
  }
})
  .then(response => {
    // 处理请求成功的逻辑
  })
  .catch(error => {
    // 处理请求失败的逻辑
  });

2. 通过在URL中以RESTful风格传递数组参数。示例代码如下：

// 定义要传递的数组参数
const arr = [1, 2, 3];

// 构建URL，并将数组参数拼接到路径部分中
const url = `/api/path/${arr.join('/')}`;

// 使用axios进行get请求
axios.get(url)
  .then(response => {
    // 处理请求成功的逻辑
  })
  .catch(error => {
    // 处理请求失败的逻辑
  });

以上两种方式都可以用于在Vue中进行get请求传递数组参数。在服务器端接收到请求时，可以通过获取URL中的参数值解析出对应的数组参数进行处理。