Vue-Router在有新组件时动态添加新路由

Question

我需要创建一个完全模块化的Vue项目，当有新组件或组件被删除时，我不知道如何添加或删除路由。

现在，我静态地键入边栏菜单中可用的所有路由。假设我的侧边栏中有10个菜单，这意味着我应该在routes.js文件中输入10个路由。

但我需要这个项目是模块化的。我说模块化的意思是，我需要给项目提供组件列表，我想我应该用一个.json文件这样做，假设这个文件说它只有5个组件可用，那么相关的路由将在routes.js文件中动态创建，当其中一个被删除时，相关的路由也应该从路由列表中删除。这就是我想要的。

我之所以这样做，是因为我使用Vue为多个设备开发了一个单一的前端。这些设备可能有不同的选项和菜单，当设备和前端匹配时，只有可用的菜单会被放在侧边栏中，所以我不能像我一直在做的那样静态地输入所有的路线。

任何建议都将不胜感激。

Answer 1

您可以遍历路由列表并使用路由器动态地将它们添加到您的路由器实例中(需要vue- router.addRoute function 3.5.0+)，而不是默认地加载它们。例如，您可以从主布局的created()钩子中执行此操作。

// app.vue

<template>
  <router-view />
</template>

<script>
  export default {
    created() {
      let routes = loadRoutes(); // insert your own function to get the correct routes here
      routes.forEach(route => this.$router.addRoute(route))
    },
  };
</script>

如果您需要能够在同一设备上的不同布局之间切换(比如经理和员工的共享终端)，您可以通过creating a new router instance或removeRoute (如果您使用v4.0+)来重置路由数组。