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

希望我能帮到你。