Как написать динамический роут vue-router / nuxt?

Question

[Tshmt]

Всем привет.
есть варианты Vue роутов.
параметры должны выглядеть по типу /param=value/param=value/ итд.
некоторые могут быть а некоторых может и не быть.

Вот такой вариант работает:

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/'
]

но что если появится еще 3 параметра )

Хотелось бы написать что-то вроде такого

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

Хелп.

Answer 1

[Aetae]

К сожалению(ли?) такие извращения не предусмотрены движком.
Решение простое: props в объекте маршрута может быть функцией, которая принимает route и собственно возвращает props. Потому вы можете ограничиться чем-то вида:

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

Если порядок и вид параметров важен, можно использовать вместо * что-то вроде:

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

, чисто как ограничение.

Решение адекватное: использовать query, где парам key=value самое место, и не изобретать велосипед.