基于webpack实现分布式动态路由

当我们想实现一个大项目，里面包含多个模块，将所有的路由写在一个index.js进行引入注册无疑会相当麻烦且混乱，也不便于维护，那么我们需要动态的实现路由的引入注册。下面是两个路由模块

map.router.js的代码：

export default {
    path: '/map',
    name: 'map',
    component: () =>
        import ('../views/map/map'), //懒加载
    children: []
}

home.router.js代码:

export default {
    path: '/home',
    name: 'home',
    component: () =>
        import ('../views/home/home'), //懒加载
    children: []
}

核心代码（router文件夹下的index.js文件中），也是分布式动态路由实现的关键：

//index.js
import Router from 'vue-router'
import Vue from 'vue'
Vue.use(Router)

const routerList = []

function importAll(r) {
    r.keys().forEach((key) => {
        routerList.push(r(key).default)
    })
}
//这里定义读取路由文件的匹配规则
importAll(require.context('./', false, /.router.js/))
const router = new Router({
    routes: routerList
})


/** 导出路由实例对象 */
export default router

这样，我们的分布式动态路由就实现好了