主要原理：使用webpack 的 require.context（）API
假设demo中有两个模块，home和login
1.在项目router文件夹下面新增 home.router.js 和 login.router.js 进行分区
大致内容：
export default { path: '/home', redirect: '/home', component: () => import('@/views/layout'), meta: { //路由的排序会根据该权限码的大小进行升序排序
role: [10000], title: '首页' }, children: [ { path: '', name: 'home', component: () => import('@/views/home/index'), meta: { title: '平台首页', icon: 'iconfont icon-shouye', role: [11000], }, }, ],}2.在router文件夹的主路由文件夹中批量引入分区路由
大致内容：
import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)let routerList = []function importAll (r) { r.keys().forEach( //r(key).default 是因为分区路由导出时采用 export default
(key) => routerList.push(r(key).default) )}importAll(require.context('.', false, /\.router\.js/))// 按照权限码排序routerList = routerList.sort((a, b) => { return a.meta.role[0] - b.meta.role[0] })export const asyncRoutes = [...routerList]export default new Router({ mode: 'history', base: '', routes: asyncRoutes})总结：该方法的好处在于，降低大型项目的路由复杂度，对路由进行分区管理，便于维护和迭代。
以上路由虽然添加了权限码，但是并没有做静态路由和动态路由的区分，如果项目需要进行权限判断时，只需要对分区路由文件进行区分，比如静态路由分区文件以 crouter.js结尾，动态路由分区文件以arouter.js结尾，在主路由中引入分区路由文件时，分两次执行importAll()方法，只需要修改两次执行时的正则就可以分别导入两种路由。
在需要频繁import的情况下，可以尝试合理使用该方法！
