I am trying to set array query params with Vue-router, but I can't find a solution.

Currently the result is

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

But my results should look like this

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

This is my html

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

Can you please tell me what do I need to do so my URL will be printed out as I wanted. If you need any additional informations, please let me know and i will provide. Thank you!

I am trying to set array query params with Vue-router, but I can't find a solution.

Currently the result is

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

But my results should look like this

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

This is my html

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

Can you please tell me what do I need to do so my URL will be printed out as I wanted. If you need any additional informations, please let me know and i will provide. Thank you!

• javascript
• vue.js
• vue-router

3 Answers 3

Based on the source it looks like this behavior is hard-coded. You might want to 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('&')
}

You have to do it in your logic in order to work as you expected

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

I worked around this by just JSON.stringifying the array and setting that directly as a string. Here's some relevant code:

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