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

希望我能帮到你。