项目实训 week2 构建前端路由/测试自动模块化

对于大型的前端项目，我们尽可能的要做到模块化。

模块化的好处有很多，例如避免命名冲突(减少命名空间污染)、灵活架构，焦点分离，方便模块间组合、分解

多人协作互不干扰、高复用性和可维护性等等。

以前端路由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
    ]
  },
];

这样，我们的前端路由便成功的进行了模块化分离。

项目实训 week2 构建前端路由/测试自动模块化

原文：https://www.cnblogs.com/aminor/p/14998207.html