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

【问题标题】：How to set array URL query param in Vue with Vue-Router如何使用 Vue-Router 在 Vue 中设置数组 URL 查询参数
【发布时间】：2018-08-14 16:41:43
【问题描述】：

我正在尝试使用 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>

你能告诉我我需要做什么，我的 URL 才能按我的意愿打印出来。如果您需要任何其他信息，请告诉我，我会提供。谢谢！

【问题讨论】：

标签： javascript vue.js vue-router

【解决方案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('&')
}

【讨论】：

hmmm，您是否看到任何其他通过 get 参数传递值数组的选项？
Vue 应该将&foo=1&foo=2 解码回一个数组。这不是你看到的吗？还是您不喜欢这种格式的外观？
我对格式不满意。我已经得到答案了。无论如何谢谢你

【解决方案2】：

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

// 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
    });
}

【讨论】：

【解决方案3】：

您必须按照自己的逻辑进行操作才能按预期工作

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

【讨论】：