require.context 实现 “去中心化“ 管理

本文链接：https://blog.csdn.net/weixin_43906597/article/details/117752352

公司的电信大型项目，200多个路由，那么其中二级路由非常之多，我们首先会想到可以模块化封装子路由，然后循环引入children数组中，如下：

// 路由
{
   path: '/home',
   name: 'home',
   component: () =>import('@/views/home.vue'),
   children: []           // 这里放的是guest这个子路由
}

// 循环引入children中
function pushRouter(name, thisArray) {
    for (var i in routers) {
        if (routers[i].name == name) {
            for (var j in thisArray) {
                routers[i].children.push(thisArray[j]);
            }
        }
    }
}

// 客户登录 -- 引入模块路由添加进路由
import guest from './guest'
pushRouter('guest', guest);

// 这是guest.js文件下的内容 - 里面存放的是home的二级路由
const guest= [
  {
    path: "workbench", 
    name: 'workbench',
    title:'工作台',
    component: () => import(/* webpackChunkName: "about" */ '@/views/manage/package/workbench/index.vue')
  },
  {
    path: "asset", 
    name: 'asset',
    title:'资产数据类',
    component: () => import(/* webpackChunkName: "about" */ '@/views/manage/package/asset/index.vue')
  },
  {
    path: "customer", 
    name: 'customer',
    title:'客户数据类',
    component: () => import(/* webpackChunkName: "about" */ '@/views/manage/package/customer/index.vue')
  },
]

就像上面这样，把所有二级路由模块化封装，再通过循环引入，就可以很好的实现模块化，但是，我遇到了require.content，如果可以，我觉得一级路由都不用写了！直接上代码

{
    path: '/home',
    name: 'home',
    component: () => import('@/views/home/'),
    children: rootRouter(require.context('./home', true, /\.js$/)) 
    // 里面的./home是查找文件的路径，会筛出home文件夹中所有.js的文件，我这里home文件夹存放的是home的二级路由 
},

// require.context 去中心化管理
function rootRouter(ctx) {
  return (ctx.keys().map(key => ctx(key)))[0].default;
}