模块化路由解决vue项目中路由文件越来越大的问题

随着项目的不断扩展原始路由文件越来越大，如下

//index.js 文件内容

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/waf_flow_alarm/frame/Home'
import Login from '@/components/waf_flow_alarm/page/system/login.vue'
import ChangePwd from '@/components/waf_flow_alarm/page/system/changepwd.vue'

Vue.use(Router)

const originalPush = Router.prototype.push

Router.prototype.push = function push(location) {
   return originalPush.call(this, location).catch(err => err)
}

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login,
    },
    {
      path: '/changepwd/:username',
      name: 'changepwd',
      component: ChangePwd,
    },
    {
      path: '/',
      name: 'Home',
      component: Home,
      redirect:'/front',
      children:[
        {
          path: '/front',
          name: 'front',
          component: () => import("@/components/waf_flow_alarm/page/system/front.vue")
        },
        {
          path: '/empty',
          name: 'empty',
          component: () => import("@/components/waf_flow_alarm/page/system/empty.vue")
        },
        {
          path: '/wafStatusWiki',
          name: 'wafStatusWiki',
          component: () => import("@/components/waf_flow_alarm/page/wiki/wafStatusWiki.vue")
        },
        {
          path: '/defenseIpQuery',
          name: 'defenseIpQuery',
          component: () => import("@/components/waf_flow_alarm/page/monitor_query/defenseIpQuery.vue")
        },
        {
          path: '/defenseDomainQuery',
          name: 'defenseDomainQuery',
          component: () => import("@/components/waf_flow_alarm/page/monitor_query/defenseDomainQuery.vue")
        },
        {
          path: '/defenseIpHistoryQuery',
          name: 'defenseIpHistoryQuery',
          component: () => import("@/components/waf_flow_alarm/page/monitor_query/defenseIpHistoryQuery.vue")
        },
        {
          path: '/defenseDomainHistoryQuery',
          name: 'defenseDomainHistoryQuery',
          component: () => import("@/components/waf_flow_alarm/page/monitor_query/defenseDomainHistoryQuery.vue")
        },
        {
          path: '/currentBlock',
          name: 'currentBlock',
          component: () => import("@/components/waf_flow_alarm/page/monitor_query/currentBlock.vue")
        },
        {
          path: '/historyBlock',
          name: 'historyBlock',
          component: () => import("@/components/waf_flow_alarm/page/monitor_query/historyBlock.vue")
        },
        {
          path: '/ccBlock',
          name: 'ccBlock',
          component: () => import("@/components/waf_flow_alarm/page/monitor_query/ccBlock.vue")
        },
        {
          path: '/proActiveUserAgent',
          name: 'proActiveUserAgent',
          component: () => import("@/components/waf_flow_alarm/page/active_defense/proActiveUserAgent.vue")
        },
        {
          path: '/proActiveUserAgentQwmh',
          name: 'proActiveUserAgentQwmh',
          component: () => import("@/components/waf_flow_alarm/page/active_defense/proActiveUserAgentQwmh.vue")
        },
        {
          path: '/proActiveBlockIpByNginx',
          name: 'proActiveBlockIpByNginx',
          component: () => import("@/components/waf_flow_alarm/page/active_defense/proActiveBlockIpByNginx.vue")
        },
        {
          path: '/proActiveBlockDomainByNginx',
          name: 'proActiveBlockDomainByNginx',
          component: () => import("@/components/waf_flow_alarm/page/active_defense/proActiveBlockDomainByNginx.vue")
        },
        {
          path: '/proActiveBlockRefererByNginx',
          name: 'proActiveBlockRefererByNginx',
          component: () => import("@/components/waf_flow_alarm/page/active_defense/proActiveBlockRefererByNginx.vue")
        },
        {
          path: '/proActiveUri',
          name: 'proActiveUri',
          component: () => import("@/components/waf_flow_alarm/page/active_defense/proActiveUri.vue")
        },
        {
          path: '/proManmachineIp',
          name: 'proManmachineIp',
          component: () => import("@/components/waf_flow_alarm/page/active_defense/proManmachineIp.vue")
        },
        {
          path: '/proManmachineDomain',
          name: 'proManmachineDomain',
          component: () => import("@/components/waf_flow_alarm/page/active_defense/proManmachineDomain.vue")
        },
        {
          path: '/proQuestionIp',
          name: 'proQuestionIp',
          component: () => import("@/components/waf_flow_alarm/page/active_defense/proQuestionIp.vue")
        },
        {
          path: '/dbinfosearch',
          name: 'dbinfosearch',
          component: () => import("@/components/waf_flow_alarm/page/conf_manage/dbinfosearch.vue")
        },
        {
          path: '/ipinfosearch',
          name: 'ipinfosearch',
          component: () => import("@/components/waf_flow_alarm/page/conf_manage/ipinfosearch.vue")
        },
        {
          path: '/sqlproxyhostsearch',
          name: 'sqlproxyhostsearch',
          component: () => import("@/components/waf_flow_alarm/page/conf_manage/sqlproxyhostsearch.vue")
        },
        {
          path: '/alarmPoolCfg',
          name: 'alarmPoolCfg',
          component: () => import("@/components/waf_flow_alarm/page/conf_manage/alarmPoolCfg.vue")
        },
        {
          path: '/alarmPoolDetail',
          name: 'alarmPoolDetail',
          component: () => import("@/components/waf_flow_alarm/page/conf_manage/alarmPoolDetail.vue")
        },
        {
          path: '/alarmSingleCfg',
          name: 'alarmSingleCfg',
          component: () => import("@/components/waf_flow_alarm/page/conf_manage/alarmSingleCfg.vue")
        },
        {
          path: '/alarmRawdata',
          name: 'alarmRawdata',
          component: () => import("@/components/waf_flow_alarm/page/conf_manage/alarmRawdata.vue")
        },
        {
          path: '/thirdpartyNginxBlockIp',
          name: 'thirdpartyNginxBlockIp',
          component: () => import("@/components/waf_flow_alarm/page/conf_manage/thirdpartyNginxBlockIp.vue")
        },
        {
          path: '/alarmWhitelistIp',
          name: 'alarmWhitelistIp',
          component: () => import("@/components/waf_flow_alarm/page/conf_manage/alarmWhitelistIp.vue")
        },
        {
          path: '/alarmWhitelistDomain',
          name: 'alarmWhitelistDomain',
          component: () => import("@/components/waf_flow_alarm/page/conf_manage/alarmWhitelistDomain.vue")
        },
        {
          path: '/roleManage',
          name: 'roleManage',
          component: () => import("@/components/waf_flow_alarm/page/system/roleManage.vue")
        },
        {
          path: '/userManage',
          name: 'userManage',
          component: () => import("@/components/waf_flow_alarm/page/system/userManage.vue")
        },
        {
          path: '/resourceManage',
          name: 'resourceManage',
          component: () => import("@/components/waf_flow_alarm/page/system/resourceManage.vue")
        },
        {
          path: '/actionLog',
          name: 'actionlog',
          component: () => import("@/components/waf_flow_alarm/page/system/actionLog.vue")
        },
        {
          path: '/dictManage',
          name: 'dictManage',
          component: () => import("@/components/waf_flow_alarm/page/system/dictManage.vue")
        }
        
      ]
    }
  ]
})

路由配置越来越大，导致代码的可读性和维护性变差。为了解决这个问题，你可以采取以下几个优化措施：

1. 模块化路由配置

将路由按模块拆分到多个文件中，并在主路由文件中进行导入。这不仅能减少单个文件的长度，还能使得不同模块的路由配置更加清晰。

2. 动态路由加载

通过 require.context 动态加载路由配置，减少手动导入的代码量。

3. 懒加载组件

对所有的组件使用懒加载，这样不仅可以优化路由文件，还能提升应用性能。

以下是具体的实现步骤：

Step 1: 创建路由模块

在 src/router/modules/ 文件夹下创建多个路由模块文件，每个文件包含特定模块的路由配置。例如：

• src/router/modules/system.js
• src/router/modules/monitor_query.js
• src/router/modules/active_defense.js
• src/router/modules/conf_manage.js

// src/router/modules/system.js
export default [
  {
    path: '/roleManage',
    name: 'roleManage',
    component: () => import("@/components/waf_flow_alarm/page/system/roleManage.vue")
  },
  {
    path: '/userManage',
    name: 'userManage',
    component: () => import("@/components/waf_flow_alarm/page/system/userManage.vue")
  },
  // 其他 system 模块路由
];

其他模块类似配置。

Step 2: 在主路由文件中导入这些模块

在主路由文件中导入这些模块的路由配置，并合并它们：

// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';

import systemRoutes from './modules/system';
import monitorQueryRoutes from './modules/monitor_query';
import activeDefenseRoutes from './modules/active_defense';
import confManageRoutes from './modules/conf_manage';

Vue.use(Router);

const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/components/Login.vue')
  },
  {
    path: '/changepwd/:username',
    name: 'changepwd',
    component: () => import('@/components/ChangePwd.vue')
  },
  {
    path: '/',
    name: 'Home',
    component: () => import('@/components/Home.vue'),
    redirect: '/front',
    children: [
      {
        path: '/front',
        name: 'front',
        component: () => import('@/components/waf_flow_alarm/page/system/front.vue')
      },
      // 使用模块化路由
      ...systemRoutes,
      ...monitorQueryRoutes,
      ...activeDefenseRoutes,
      ...confManageRoutes,
    ]
  }
];

export default new Router({
  routes
});

Step 3: 懒加载所有组件

确保在所有路由中，组件的导入都是通过懒加载的方式：

component: () => import('@/components/YourComponent.vue')

总结

通过上述方法，你可以将路由配置拆分成多个模块，提升代码的可维护性，同时通过懒加载优化性能。

---

a. 继续为其他项目模块编写模块化路由文件。

b. 添加路由守卫或动态路由处理逻辑以进一步优化代码。