对于大型的前端项目，我们尽可能的要做到模块化。
模块化的好处有很多，例如避免命名冲突(减少命名空间污染)、灵活架构，焦点分离，方便模块间组合、分解
多人协作互不干扰、高复用性和可维护性等等。
以前端路由vue-router为例，如果将所有的路由写在一个js文件里将会造成很大的冗余，难以阅读。
例如：
const routes = [
{
path: ‘/‘,
name: ‘Main‘,
component: () => import(‘@/views/Main‘),
meta:{
title:‘首页‘
},
children:[
{
path:‘test/testComponent1‘,
name:‘testComponent1‘,
component:() => import(‘@/views/test/TestComponent1‘),
meta:{
title:‘测试组件1-测试组件‘,
}
},
{
path:‘test/testComponent2‘,
name:‘testComponent2‘,
component:() => import(‘@/views/test/TestComponent2‘),
meta:{
title:‘测试组件2-测试组件‘,
}
},
//田方源 系统管理
{
path:‘system/userManagement‘,
name:‘userManagement‘,
component:() => import(‘@/views/systemManagement/UserManagement‘),
meta:{
title:‘用户管理-系统管理‘,
}
},
{
path:‘system/roleManagement‘,
name:‘roleManagement‘,
component:() => import(‘@/views/systemManagement/RoleManagement‘),
meta:{
title:‘角色管理-系统管理‘,
}
},
{
path:‘system/departmentManagement‘,
name:‘departmentManagement‘,
component:() => import(‘@/views/systemManagement/DepartmentManagement‘),
meta:{
title:‘部门管理-系统管理‘,
}
},
{
path:‘system/permissionManagement‘,
name:‘permissionManagement‘,
component:() => import(‘@/views/systemManagement/PermissionManagement‘),
meta:{
title:‘权限管理-系统管理‘,
}
},
]
},
];
仅仅几个路由跳转，就显得十分的臃肿，所以我们尽可能的对其进行模块化，并让程序自动整合所有模块
首先，我们需要建立自己的路由文件夹，并在自己的文件夹下编写路由文件，如图所示：
其次，在router/index.js里，编写如下代码：
const manageFiles = require.context(‘.‘, true, /\.js$/);
let configRouters = []
manageFiles.keys().forEach(key => {
if (key === ‘./index.js‘) return // 如果是当前文件，则跳过
configRouters = configRouters.concat(manageFiles(key)) // 读取出文件中的default模块
});
这里首先使用正则表达式，匹配所有js文件，
如果不是当前文件，则解析其module.exports的内容，并将所有模块整合起来
其中，子模块的写法如下
module.exports = [{},{},{}] //路由数组
使用时则直接注册configRouters即可：
const routes = [
{
path: ‘/‘,
name: ‘Main‘,
component: () => import(‘@/views/Main‘),
meta: {
title: ‘首页‘
},
children: [
...configRouters, //注册configRouters
]
},
];
这样，我们的前端路由便成功的进行了模块化分离。