@Tshmt

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

Всем привет.
есть варианты 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/)?

Хелп.
  • Вопрос задан
  • 508 просмотров
Пригласить эксперта
Ответы на вопрос 1
Aetae
@Aetae Куратор тега Vue.js
Тлен
К сожалению(ли?) такие извращения не предусмотрены движком.
Решение простое: 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 самое место, и не изобретать велосипед.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы