has always been accustomed to writing its own routing functions in a router.js, but found that when the project menu increases (including some sub-routes), the functions become more and more, and the router.js code becomes longer and longer, it becomes not so easy to manage, and multi-person cooperation is not particularly obvious at a glance.
like this

const router = new Router({
    routes: [
        {
            path: "/login",
            name: "login",
            component: resolve => require(["@/components/login"], resolve)
        },
        {
            path: "/index",
            name: "index",
            component: resolve => require(["@/components/index"], resolve),
            children: [
                // 
                {
                    path: "/lesson",
                    name: "lesson",
                    component: resolve => require(["@/components/lesson"], resolve),
                },
                {
                    path: "/lesson/editLesson",
                    name: "editLesson",
                    component: resolve => require(["@/components/lesson/editLesson"], resolve)
                },
                {
                    path: "/lesson/excelLesson",
                    name: "excelLesson",
                    component: resolve => require(["@/components/lesson/excelLesson"], resolve)
                },
                {
                    path: "/lesson/excelLesson/excelEdit",
                    name: "excelEdit",
                    component: resolve => require(["@/components/lesson/excelEdit"], resolve)
                },
                // 
                {
                    path: "/resources",
                    name: "resources",
                    component: resolve => require(["@/components/resources"], resolve)
                },
                // 
                {
                    path: "/statistics",
                    name: "statistics",
                    component: resolve => require(["@/components/statistics"], resolve)
                },
                // 
                {
                    path: "/activity",
                    name: "activity",
                    component: resolve => require(["@/components/activity"], resolve)
                },
                {
                    path: "/activity/editActivity",
                    name: "editActivity",
                    component: resolve => require(["@/components/activity/editActivity"], resolve)
                },
                {
                    path: "/activity/lockConfig",
                    name: "lockConfig",
                    component: resolve => require(["@/components/activity/lockConfig"], resolve)
                },
                {
                    path: "/activity/msgConfig",
                    name: "msgConfig",
                    component: resolve => require(["@/components/activity/msgConfig"], resolve),
                    children: [
                        {
                            path: "/activity/liebian/msgUnLock",
                            name: "lb_msgUnLock",
                            component: resolve => require(["@/components/activity/liebian/msgUnLock"], resolve)
                        },
                        {
                            path: "/activity/liebian/msgStudy",
                            name: "lb_msgStudy",
                            component: resolve => require(["@/components/activity/liebian/msgStudy"], resolve)
                        },
                        {
                            path: "/activity/xuqi/msgUnLock",
                            name: "xq_msgUnLock",
                            component: resolve => require(["@/components/activity/xuqi/msgUnLock"], resolve)
                        },
                        {
                            path: "/activity/xuqi/msgStudy",
                            name: "xq_msgStudy",
                            component: resolve => require(["@/components/activity/xuqi/msgStudy"], resolve)
                        },
                        {
                            path: "/activity/xuqi/msgRenewal",
                            name: "xq_msgRenewal",
                            component: resolve => require(["@/components/activity/xuqi/msgRenewal"], resolve)
                        },
                    ]
                },
                // 
                {
                    path: "/template",
                    name: "template",
                    component: resolve => require(["@/components/template"], resolve)
                },
                {
                    path: "/template/editTemplate",
                    name: "editTemplate",
                    component: resolve => require(["@/components/template/editTemplate"], resolve)
                },
                // 
                {
                    path: "/collection",
                    name: "collection",
                    component: resolve => require(["@/components/collection"], resolve)
                },
                {
                    path: "/collection/editCollection",
                    name: "editCollection",
                    component: resolve => require(["@/components/collection/editCollection"], resolve)
                },

                /* ------- */
                /*  */
                /* ------- */
            ]
        }, 
        ,{
            path: "*",
            redirect: "/login"
        }
    ]
})

at first, I wanted to create a new routing folder like a component, write the corresponding route js, import , and then push to children, but found that because of the existence of subordinate child routes, I didn"t know how to deal with this problem. "(routing _ routes)" always felt that it was not elegant enough.