Vue.js：API調用中帶有數組的addRoutes方法

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,
  },
])

希望我能幫到你。