Setting nested optional parameters in Vue 2 router

Question

I'm creating a search engine with multiple filters users can pick, along with a query. All of those are optional and add up to the filtered result set.

So all these cases are possible and being properly stored in an object of keywords:

Searching with a query
Searching by country (without specifying any query)
Searching by type (without specifying any query)
Searching a query with a country and a type
...

What would be the best way of handling this with Vue Router? I want the search route to be updated with whatever filters are picked.

As far as I can tell I can't use multiple optional parameters and unless I specify all possible combinations (which is a bit silly) like:

export const routes = [
{ path: '/search', name: 'search', component: Search, children: [
    { path: 'query/:query, component: Search },
    { path: 'type/:type', component: Search },
    { path: 'country/:country', component: Search },
    ...
]},

... I don't see any other way of solving the problem. What would be the best option?

Saurabh · Accepted Answer · 2017-03-04 05:55:46Z

2

One option can be to use query params, so your URL will look like this:

/search?country=sire&type=middleearth

You can access these from $route.query.

answered Mar 4, 2017 at 5:55

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

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

Collectives™ on Stack Overflow

Setting nested optional parameters in Vue 2 router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related