vue配置文件自动生成路由和菜单实例代码

Vue项目中，通常需要配置路由和菜单，但手动编写路由配置和菜单项信息可能会比较繁琐和易错。因此，利用一些插件或工具可以自动生成路由和菜单是非常方便的。

下面是一份“vue配置文件自动生成路由和菜单实例代码”的完整攻略：

1. 准备工作

首先，我们需要在项目中安装必要的依赖：

npm i vue-router routify --save

其中，vue-router是Vue官方的路由管理插件，而routify是一个第三方插件，用于根据文件夹结构自动生成路由。

2. 配置文件结构

接下来，我们需要在项目中创建一些文件和目录，包括：

• router目录，用于存储自动生成的路由配置文件；
• pages目录，用于存储页面组件文件；
• menu目录，用于存储自动生成的菜单项信息文件；

具体来说，每个页面组件文件应该按照如下方式组织：

pages/
├── Home.vue
├── About.vue
└── Contact.vue

每个菜单项信息文件应该按照如下方式组织：

menu/
├── Home.js
├── About.js
└── Contact.js

其中，每个菜单项信息文件应该包含如下信息：

export default {
  name: '菜单项名称',
  path: '/菜单项路径',
  icon: '菜单项图标',
};

3. 自动生成路由配置文件

使用routify插件可以自动根据文件夹结构生成路由配置文件。在项目中，我们需要创建一个routify.config.js文件，其中配置如下：

module.exports = {
  pages: 'src/pages',
  routes: [
    {
      path: '/',
      component: 'src/layouts/MainLayout.vue',
      children: 'menu/**/*.js',
    },
  ],
};

其中，pages字段指定页面组件文件所在的目录，routes字段定义了根路由路径以及子路由路径的生成规则。

接下来，在项目中运行如下命令：

npx routify generate

即可自动生成路由配置文件。生成的路由会按照如下结构：

export default [
  {
    path: '/',
    component: () => import('src/layouts/MainLayout.vue'),
    children: [
      {
        path: '/home',
        name: 'Home',
        component: () => import('src/pages/Home.vue'),
      },
      {
        path: '/about',
        name: 'About',
        component: () => import('src/pages/About.vue'),
      },
      {
        path: '/contact',
        name: 'Contact',
        component: () => import('src/pages/Contact.vue'),
      },
    ],
  },
];

示例1：配置routify.config.js生成路由代码

下面是一个routify.config.js示例：

module.exports = {
  pages: 'src/views',
  routes: [
    {
      path: '/',
      component: 'src/layouts/MainLayout.vue',
      children: 'src/views/**/*.vue',
    },
  ],
};

示例2：按模块生成路由代码

下面是一个基于modules目录模块化组织路由的routify.config.js示例：

module.exports = {
  pages: 'src/modules',
  routes: [
    {
      path: '/',
      component: 'src/layouts/MainLayout.vue',
      children: [
        {
          path: '',
          name: 'Home',
          component: 'src/modules/home/index.vue',
        },
        {
          path: '/about',
          name: 'About',
          component: 'src/modules/about/index.vue',
        },
        {
          path: '/contact',
          name: 'Contact',
          component: 'src/modules/contact/index.vue',
        },
      ],
    },
  ],
};

4. 自动生成菜单项信息文件

在我们生成了路由配置文件之后，我们还需要自动生成对应的菜单项信息文件。为此，我们可以使用Webpack插件require.context。

首先，我们需要在menu目录下创建一个index.js文件，该文件应该包含如下代码：

const menu = [];

const files = require.context('./', true, /\.js$/);

files.keys().forEach((key) => {
  if (key === './index.js') return;

  const item = files(key).default;
  menu.push(item);
});

export default menu;

这段代码会自动遍历menu目录下所有的.js文件，读取菜单项信息，并将其添加到一个数组中，最后导出这个数组。

而每个菜单项信息文件应该包含如下信息：

export default {
  name: '菜单项名称',
  path: '/菜单项路径',
  icon: '菜单项图标',
};

最后，在index.js中使用如下代码即可将自动读取的菜单项信息与路由配置文件关联起来：

import routes from '../router/routes';
import menu from './index';

function addMenuItem(router, item) {
  const menuItem = {
    name: item.name,
    path: item.path,
    icon: item.icon,
  };

  const route = routes.find((r) => r.path === menuItem.path);
  if (route) {
    menuItem.name = route.children[0].name;
    router.addRoute(route.name, route.children[0]);
  }

  return menuItem;
}

export default function getMenuItems(router) {
  return menu.map((item) => addMenuItem(router, item));
}

示例3：在菜单项信息中增加权限控制

对于需要权限控制的菜单项，我们还可以在其信息中加入相应的权限标记。例如，我们将menu目录下所有的菜单项都读取到一个数组中，可以在相应的菜单项信息中加入roles字段：

export default {
  name: '菜单项名称',
  path: '/菜单项路径',
  icon: '菜单项图标',
  roles: ['admin', 'guest'],
};

这样，在渲染菜单时，我们就可以根据当前用户的权限动态过滤掉不应该显示的菜单项：

const currentUserRoles = ['guest'];

function addMenuItem(router, item) {
  const menuItem = {
    name: item.name,
    path: item.path,
    icon: item.icon,
  };

  const route = routes.find((r) => r.path === menuItem.path);
  if (route) {
    menuItem.name = route.children[0].name;
    router.addRoute(route.name, route.children[0]);
  }

  if (item.roles && item.roles.some((r) => currentUserRoles.includes(r))) {
    return menuItem;
  }
}

export default function getMenuItems(router) {
  return menu.map((item) => addMenuItem(router, item)).filter((item) => item);
}

总结

以上就是自动生成Vue项目路由和菜单实例代码的攻略了。通过合理配置Webpack插件、配置文件结构、菜单项以及路由配置文件，可以在减少手工编写的同时也有效提高代码的可维护性和可用性。