Как сформировать маршруты с асинхронными данными?

Question

[Andy Oker]

У меня есть файл router.js в нем я выставляю маршруты, допустим, Main и Category:

import Vue from 'vue'
import VueRouter from 'vue-router'
const routes = [
 {
    path: '/',
    name: 'Main',
    component: () => import('./views/Main.vue'),
  },
  {
    path: '/category',
    name: 'Category',
    component: () => import('./views/Category.vue'),
  }
]

Так же есть функция createRouter:

export function createRouter() {
  const router = new VueRouter({
    scrollBehavior() {
      return { x: 0, y: 0 }
    },
    mode: 'history',
    routes
  })
  router.beforeEach((to, from, next) => {
    document.title = to.meta.title
    next()
  })
  return router
}

Я хочу до экспорта функции createdRouter получить все категории таким методом:
store.dispatch('categories')
и для маршрута категорий в массиве routes определить path из их названий:
path: '/(cat1|cat2|cat3)/

Как это можно сделать?

Comments

[Klein Maximus]

А зачем Вам это надо?
Может быть другой, более прямой способ добиться желаемого?

[Andy Oker]

Klein Maximus, Возможно. Круто если так)
Мне нужно, чтобы название категории встало сразу после домена - https://sitename/categoryname
А отдельные роуты для каждой не вариант создавать

[Klein Maximus]

А если у Вас 100500 таких категорий, что все грузить с сервера?
Есть другое решение (в ответах).

Answer 1

[Klein Maximus]

Используйте динамический роутинг и обрабатывайте полученный идентификатор - https://router.vuejs.org/ru/guide/essentials/dynam...

const routes = [
 {
    path: '/',
    name: 'Main',
    component: () => import('./views/Main.vue'),
  },
  {
    path: '/category',
    name: 'Category',
    component: () => import('./views/Category.vue'),
  },
  {
    path: '/:category',
    // ...
  }
]

Соответственно, при получении запроса ищете в api наличие категории :category. Если такой нет, показывайте ошибку 404.

Comments

[Andy Oker]

Спасибо!