vue配置文件自动生成路由和菜单

2024-01-08 12:35:59

在大型项目中，手动维护庞大的路由配置可能是一项繁琐且容易出错的任务。为了简化这一过程，我们可以利用vue配置文件自动生成路由和菜单栏，从而提高开发效率和代码的可维护性。

配置文件

首先，我们需要创建一个名为router.json的配置文件，它将包含有关路由和菜单栏的配置数据。配置文件可以采用以下格式：

{
  "routes": [
    {
      "path": "/home",
      "name": "Home",
      "component": "Home"
    },
    // 其他路由配置...
  ],
  "menu": [
    {
      "name": "主页",
      "icon": "fa fa-home",
      "path": "/home"
    },
    // 其他菜单配置...
  ]
}

配置文件中的"routes"数组定义了应用程序的路由，而"menu"数组定义了左侧菜单栏的项目。

自动生成路由

接下来，我们需要创建一个脚本或工具来读取router.json配置文件并动态生成路由。我们可以使用vue-router的addRoutes()方法来实现这一点。

import VueRouter from "vue-router";
import routerConfig from "./router.json";

const router = new VueRouter();

routerConfig.routes.forEach((route) => {
  router.addRoute(route);
});

通过调用addRoutes()方法，我们可以将配置文件中定义的路由添加到路由器实例。

自动生成菜单栏

同样，我们可以使用脚本或工具从router.json配置文件中提取菜单栏数据并将其呈现到左侧菜单栏中。我们可以使用一个vue组件来实现这一点。

<template>
  <ul class="menu">
    <li v-for="item in menuItems" :key="item.name">
      <a :href="item.path">
        <i :class="item.icon"></i>
        {{ item.name }}
      </a>
    </li>
  </ul>
</template>

<script>
import routerConfig from "./router.json";

export default {
  computed: {
    menuItems() {
      return routerConfig.menu;
    },
  },
};
</script>