VUE去中心化的路由实现

在做VUE时，很多时候把路由写在同一个路由文件里，这样在项目越来越大时，该文件需要多次修改，这样很不方便。
现在需要把各个路由分配至各个模块中，然后进行汇总
1.编写各个模块的路由

 export default [


    {
        path: '/sys/auth/menu',
        component: resolve => require(['./sys_menu.vue'], resolve),
        meta: {title: '菜单管理'}
    },
    {
        path: '/sys/auth/resource',
        component: resolve => require(['./sys_auth_resource.vue'], resolve),
        meta: {title: '资源管理'}
    },
    {
        path: '/sys/auth/role',
        component: resolve => require(['./sys_auth_role.vue'], resolve),
        meta: {title: '角色管理'}
    },

]

2.遍历各个路由，汇总路由

 import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);
let routers = []
const routerContext = require.context('./views', true, /router\.js/)
routerContext.keys().forEach(route => {
    // 如果是根目录的 index.js、 不做任何处理
    if (route.startsWith('./index')) {
        return
    }
    const routerModule = routerContext(route)
    // 兼容 import export 和 require module.export 两种规范 Es modules commonjs
    routers = [...routers, ...(routerModule.default || routerModule)]
})
export default new Router({
    routes: [
        {
            path: '/',
            redirect: '/dashboard'
        },
        {
            path: '/',
            component: resolve => require(['./components/common/Home.vue'], resolve),
            meta: {title: '主页'},
            children: routers
        },
        {
            path: '/login',
            component: resolve => require(['./views/Login.vue'], resolve)
        },
        {
            path: '/oauth/:source',
            component: resolve => require(['./views/oauth/oauth.vue'], resolve)
        },
        {
            path: '*',
            redirect: '/404'
        },

    ]
})

至此，VUE去中心化路由功能已完成！