vue-router模块化管理

背景：项目非常大的时候路由非常多，路由模块化就易于阅读以及管理

1、目录结构

2、在main.js中注入router

import router from "./router";//引入路由出口文件
new Vue({
    router,//挂载路由实例
    store,
    render: h => h(App)
}).$mount("#app");

3、router/index.js

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
let routes = [];
const routerContext = require.context('./', true, /index\.js$/);
routerContext.keys().forEach(route => {
    if (route.startsWith('./index')) return;
    const routerModule = routerContext(route);
    routes = routes.concat(routerModule.default || routerModule)
});
const router = new Router({
    mode: 'hash',
    base: './',
    routes: routes,
});
export default router;

4、模块路由js：

export default [{
        path: "*",
        redirect: '/'
    },
    {
        path: '/',
        name: 'index',
        component: () => import('@/views/index.vue')
    },
    {
        path: '/applicationProgress',
        name: 'applicationProgress',
        component: () => import('@/views/applicationProgress/index.vue')
    },
]