vue-router query parameter as array with keys

Question

I need to generate a vue-router link that contains an array with string keys as a query parameter. I want the resulting URL to look like

url?param[key]=value

I need these kinds of query parameters to match an existing backend infrastructure, so renaming/refactoring them is not an option.

I've tried to use a router-link like the one below, but the param object just get's serialized as %5Bobject%20Object%5D. Maybe there is an option to change the way this object is serialized within vue-router?

<router-link :to="{name: 'xyz', query: {param: 'value'}}">link</router-link>

Does anyone have helpful input? Thank you :)

Martin · Accepted Answer · 2018-08-17 19:55:13Z

10

After spending some time vue-router GitHub issues and their docs, I figured it out.

When creating your RouteConfig, import qs and set the parseQuery and stringifyQuery methods as follows:

parseQuery: (query: any): object => {
    return qs.parse(query);
},
stringifyQuery(query: any): string {
    let result = qs.stringify(query, {encode: false});

    return result ? ('?' + result) : '';
}

It is important to include {encode: false}, otherwise the square brackets will get URL encoded.

answered Aug 17, 2018 at 19:55

Martin

5755 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jordan Over a year ago

Not sure what we are importing, with import qs ?

Tallboy Over a year ago

You want { encodeValuesOnly: true }, not encode: false

Omer Çiftçi · Accepted Answer · 2019-10-04 16:24:09Z

2

Addition to Martin's comment,

Exact Router config should be :

// https://github.com/ljharb/qs
import qs from 'qs';

const router = new Router({
    routes: [
        // ...
    ],
    // set custom query resolver
    parseQuery(query) {
        return qs.parse(query);
    },
    stringifyQuery(query) {
        var result = qs.stringify(query);

        return result ? ('?' + result) : '';
    }
});

and query parameters inside routes will be automatically converted url string and parsed as an object when accessing $router.query .

answered Oct 4, 2019 at 16:24

Omer Çiftçi

561 silver badge5 bronze badges

3 Comments

isset Over a year ago

the encode false is missing in your example: qs.stringify(query, {encode: false});

Tallboy Over a year ago

github.com/ljharb/qs

Tallboy Over a year ago

I suspect youd actually want { encodeValuesOnly: true }, not encode: false

Collectives™ on Stack Overflow

vue-router query parameter as array with keys

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related