vue-router 大型项目如何管理自己路由文件?

一直都习惯在一个router.js 去编写自己的路由功能,但是发现当项目菜单增多(包括一些子路由),功能变多,router.js 代码也会越来越长,就会变得不是那么容易管理,多人合作也会不是特别一目了然的感觉。
像这种

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'
        }
    ]
})

一开始想的是希望像组件一样,新建一些路由文件夹,写上对应的路由js,import 引入这种方式,然后push到children里,但是发现,由于下级子路由的存在,然后就不知道怎么去处理这个问题了╮(╯_╰)╭ 总是觉得还是不够优雅…

回答:

自问自答~~~ 每次都是提了问题才开窍╮(╯_╰)╭
其实router文件就是把所有的路由对象,都放在route数组里面。可以用ES6语法的 展开运算符,按模块分类然后拼接到routes数组中。
可以看下展开运算符的基本操作。。

clipboard.png

所以提问的问题的路由文件代码可以分割如下
图片描述

展示其中一个模块的路由代码
图片描述

是不是这样感觉就清爽很多啦~~~ 太帅!!!???

回答:

你子路由没必要写全路径呀,子路由若是以父路由为前缀,直接省略哪部分就好了

回答:

问一下,你有没有碰到,三层路由甚至更多层路由的时候,开发时无法刷新最底层的路由问题?? 我需要每次更改路由再从新ctrl-z回来才会刷新…… 每次调试都好累..

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注