How to write a vue-router / nuxt dynamic route?

Question

Combinatorics

Hello.
There are options for Vue routes.
parameters should look like /param=value/param=value/etc.
some may be and some may not be.
Here is an option that works:

const routes = [
  '/product/country=:country/',
  '/product/country=:country/page=:page/',
  '/product/country=:country/status=:status/',
  '/product/country=:country/color=:color/',
  '/product/country=:country/action=:action/',
  '/product/country=:country/status=:status/page=:page/',
  '/product/country=:country/color=:color/page=:page/',
  '/product/country=:country/action=:action/page=:page/',
  '/product/status=:status/',
  '/product/color=:color/',
  '/product/action=:action/',
  '/product/status=:status/page=:page/',
  '/product/color=:color/page=:page/',
  '/product/action=:action/page=:page/'
]

but what if 3 more parameters appear)
I would like to write something like this

/product/(country=:country/)?(status=:status/)?(action=:action/)?(color=:color/)?(page=:page/)?

Help.

Answer 1

Unfortunately (whether?) such perversions are not provided by the engine.
The solution is simple: the props in the route object can be a function that takes a route and actually returns props. Therefore, you can limit yourself to something like:

{ 
  props: route => route.path.split('/').reduce((props, keyvalue) => {
    if(keyvalue = keyvalue.match(/^(.*?)=(.*)$/)) {         
      props[keyvalue[1]] = keyvalue[2];
    }
    return props;
  }, {}), 
  path: '/product/*', 
  component: Foo 
}

If the order and type of parameters is important, you can use something like this instead of *:

path: '/product/(country=[^/]+/)?(status=[^/]+/)?', // ...

, purely as a limitation.
The solution is adequate: use a query, where the key=value params are the right place, and not reinvent the wheel.