Vue.js: метод addRoutes с массивом из вызова API

Question

Я собираюсь использовать метод addRoutes впервые. Я не нашел полных руководств о том, как разработчики могут использовать этот метод, поэтому я решил попробовать здесь.

В моем приложении есть какая-то CMS, поэтому пользователь может создавать новые страницы с пользовательскими путями. В моем файле router / index.js, куда я импортирую компоненты и объявляю их маршруты, мне нужно добавить эти пользовательские маршруты.

У меня есть конечная точка API, которая может дать мне JSON с массивами этих маршрутов. Как я могу вызвать эту конечную точку в моем файле router / index.js и добавить эти новые маршруты в мой маршрутизатор?

Вот что у меня есть в файле router.index.js (я добавил его структуру, а не сам код):

import Vue from 'vue';
import VueRouter from 'vue-router';
import http from '../http';
import config from '../config';
import Home from '../components/pages/Home';

Vue.use(VueRouter);

const router = new VueRouter({
 mode: 'history',
 routes: [
  {
   path: '/home',
   name: 'home',
   component: Home,
  },
  ...
  ],
});

router.addRoutes([]);

export default router;

Answer 1

Вы можете использовать addRoutes следующим образом:

import router from '@/router'
import Project from './pages/Project'
import Projects from './pages/Projects'

router.addRoutes([{
  path: '/projects',
  name: 'projects.projects',
  component: Projects,
  props: false
}, {
  path: '/projects/:id',
  name: 'projects.project',
  component: Project,
  props: true
}])

Из документов:

Динамически добавлять дополнительные маршруты к маршрутизатору. Аргумент должен быть массивом, использующим тот же формат конфигурации маршрута с опцией конструктора маршрутов

Полный пример:

У вас есть основной маршрутизатор, как это:

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../components/pages/Home';

Vue.use(VueRouter);

const router = new VueRouter({
 mode: 'history',
 routes: [
  {
   path: '/home',
   name: 'home',
   component: Home,
  },
  ],
});

export default router;

Теперь вы создаете новую страницу со следующей структурой.

-- NewPage
   -- NewPage.vue
   -- route.js

route.js должно выглядеть так:

import router from '@/router' //importing the main router
import NewPage from './NewPage.vue'

router.addRoutes([
  {
    path: '/new-page',
    name: 'newPage',
    component: NewPage,
  },
])

Надеюсь, я вам помог.