Question

我正在尝试使用Vue-router设置数组查询参数，但我找不到解决方案。

目前结果是

http://localhost:8080/#/locations?page=1&categories=1&categories=2&categories=3

但我的结果应该是这样的

http://localhost:8080/#/locations?page=1&categories[]=1,2,3

这是我的HTML

<router-link :to="{ path: 'locations', query: { page: 1, categories: [1,2,3] }}">
    {{ $root.trans.translate("locations") }}
</router-link>

您能否告诉我我需要做什么，以便根据需要打印出我的网址。如果您需要任何其他信息，请告诉我，我会提供。谢谢！

Answer 1

基于source看起来这种行为是硬编码的。您可能需要open an issue。

if (Array.isArray(val)) {
  const result = []
  val.forEach(val2 => {
    if (val2 === undefined) {
      return
    }
    if (val2 === null) {
      result.push(encode(key))
    } else {
      result.push(encode(key) + '=' + encode(val2))
    }
  })
  return result.join('&')
}

Answer 2

您必须在逻辑中执行此操作才能按预期工作

this.$router.push({
  path: 'path',
  query: {
    page: 1,
    categories: [1,2,3]
  }
});

Answer 3

我通过JSON.stringify设置数组并将其直接设置为字符串来解决此问题。这是一些相关的代码：

// use when query params include values that are arrays
export function queryParamIncludes(key, value) {
    let rawValue = router.currentRoute.query[key];
    if (rawValue == null) {
        return false;
    }
    let arr = JSON.parse(rawValue);
    return Array.isArray(arr) && arr.includes(value);

}

// append a value to the array at the given key
export function appendQueryParam(key, newValue) {
    let rawValue = router.currentRoute.query[key];
    let arr = rawValue == null ? [] : JSON.parse(rawValue);
    arr.push(newValue);

    let newQuery = {
        ...router.currentRoute.query,
        [key]: JSON.stringify(arr)
    };

    router.push({
        query: newQuery
    });
}

// Remove any value of the array at the given key.
// If the resulting array is empty, delete the whole key-value pair.
export function spliceQueryParam(key, valueToRemove) {
    let rawValue = router.currentRoute.query[key];
    if (rawValue == null) {
        return;
    }
    let arr = JSON.parse(rawValue);
    if (!Array.isArray(arr) || !arr.includes(valueToRemove)) {
        return;
    }

    arr = arr.filter(v => v !== valueToRemove);

    let newQuery = {
        ...router.currentRoute.query
    };

    if (arr.length === 0) {
        delete newQuery[key];
    } else {
        newQuery[key] = JSON.stringify(arr);
    }
    router.push({
        query: newQuery
    });
}

如何使用Vue-Router在Vue中设置数组URL查询参数

3 个答案: