当新建一个项目的时候,很多人协同开发,如何路由写的很乱就会有造成很多工作量,甚至后期不好维护,因此自动化是有必要的。
一、定义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 || [],
});
});
});
至此就实现了路由自动化,后期需要新增模块,只需按照一、中的格式增加即可。也可以按照需要的功能,增加字段。例如路由守卫等。