搭建项目 路由自动化

当新建一个项目的时候，很多人协同开发，如何路由写的很乱就会有造成很多工作量，甚至后期不好维护，因此自动化是有必要的。

一、定义modules文件夹中每一个模块的暴露格式，例如
1、首先将modules中的全部模块都在index中暴露出去

import classManage from './classManage'; // 课程管理
import staticsAnalisis from './staticsAnalisis'; // 统计分
import systemSetting from './systemSetting'; // 系统设置

export default {
  classManage,
  staticsAnalisis,
  systemSetting，
};

2、其次是每一个模块中的格式，主要就是router需要的，path、name等
例如：

import classStatics from './classStatics';
import sunectsStatics from './subjectsStatics';

export default {
  displayNameKey: 'class_manage',
  icon: 'menu_te',
  pages: {
    classStatics,
    sunectsStatics,
  },
};
// 例如这个模块中有俩个页面，那么就需要定义各自的path了

2、例如classStatics.vue中

<script>
export default {
  name: 'class-statistics',
  path: 'class-statistics',
  displayNameKey: 'class-statistics',
};
</script>

二、router中

import Vue from 'vue';
import Router from 'vue-router';
import modules from '@/modules’; // 引进文件夹需要配置
import ErrorPage from '@/components/layout/ErrorPage';

Vue.use(Router);
const routes = [
  {
    path: '/error',
    name: 'error',
    component: ErrorPage,
  },
];
Object.keys(modules).forEach((moduleName) => {
  const pageModule = modules[moduleName];
  if (pageModule.path && pageModule.component) {
    routes.push({
      path: `/${pageModule.path}`,
      name: `${pageModule.displayNameKey}.module_name`,
      component: pageModule.component,
    });
  }

  if (!pageModule.pages) {
    return;
  }
  Object.keys(pageModule.pages).forEach((pageName) => {
    const page = pageModule.pages[pageName];
    routes.push({
      path: `/${pageModule.pages[pageName].path}`,
      component: page,
      children: page.childrenPath || [],
    });
  });
});

至此就实现了路由自动化，后期需要新增模块，只需按照一、中的格式增加即可。也可以按照需要的功能，增加字段。例如路由守卫等。