Как сделать обработку маршрута path: '/:category' и path: '/:city?

Question

[Andy Oker]

У меня одностраничное приложение с SSR, настроенным, по этой документации.
Мне необходимо сделать доступ по пути - /sitename/category и также /sitename/city

Я создал такой роут:

catalog: {
      path: '/:param/',
    },

Я получаю по апи набор категорий и набор городов. В теории я могу просто проверить и сделать некоторое сопоставление отчего уже выбирать какой компонент рендерить. Но некоторые вещи не понимаю как реализовать:

1) На такую страницу попадает абсолютно любой роут. Где лучше обработать эту выборку? В serverPrefetch?
2) Как в случае если роут города и категории не был найден отобразить компонет 404-той страницы и сделать так, чтобы он отдавал код ответа 404?

Answer 1

[Aetae]

В beforeEnter обработай как хочешь.

Comments

[Andy Oker]

Спасибо, кажется тут я могу сделать то, что хочу и далее я столкнулся с ситуацией:
Теперь я добавил еще один роут:

catalog: {
    path: '/catalog/',
    name: 'Catalog',
    ...
},
catalogParam: {
    path: '/catlog/:param/',
    name: 'CatalogParam',
    ...
    beforeEnter(to, from, next) {
       if (isCity) {
          next(???) Тут я хочу перейти в компонент каталога и получить урл (catalog/city). Однако, то что я пробовал пока что приводило к ошибкам.
       } else if (isProduct) {
          next()
       } else {
          next('/404')
       }
 
    }
},

[Aetae]

Andy Oker, в обоих случаях просто next, у вас же один и тот же компонент за оба варианта отвечает? Если надо - можно скрытый параметр передать.
Условно так:

beforeEnter(to, from, next) {
  if (to.params.type) 
    return next();

  const type = (isCity && 'city') || (isProduct && 'procuct');
  if (!type) 
    return next('/404');

  const {name, query, params} = to;
  return next({
    name,
    params: {...params, type},
    query
  });
}