热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

vuerouter大型项目如何管理自己路由文件?

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
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,

1
import

引入这种方式,然后

1
push

到children里,但是发现,由于下级子路由的存在,然后就不知道怎么去处理这个问题了╮(╯_╰)╭ 总是觉得还是不够优雅...


推荐阅读
  • vue使用
    关键词: ... [详细]
  • Webpack5内置处理图片资源的配置方法
    本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
  • VueCLI多页分目录打包的步骤记录
    本文介绍了使用VueCLI进行多页分目录打包的步骤,包括页面目录结构、安装依赖、获取Vue CLI需要的多页对象等内容。同时还提供了自定义不同模块页面标题的方法。 ... [详细]
  • Android系统移植与调试之如何修改Android设备状态条上音量加减键在横竖屏切换的时候的显示于隐藏
    本文介绍了如何修改Android设备状态条上音量加减键在横竖屏切换时的显示与隐藏。通过修改系统文件system_bar.xml实现了该功能,并分享了解决思路和经验。 ... [详细]
  • 本文介绍了如何使用Express App提供静态文件,同时提到了一些不需要使用的文件,如package.json和/.ssh/known_hosts,并解释了为什么app.get('*')无法捕获所有请求以及为什么app.use(express.static(__dirname))可能会提供不需要的文件。 ... [详细]
  • 本文记录了在vue cli 3.x中移除console的一些采坑经验,通过使用uglifyjs-webpack-plugin插件,在vue.config.js中进行相关配置,包括设置minimizer、UglifyJsPlugin和compress等参数,最终成功移除了console。同时,还包括了一些可能出现的报错情况和解决方法。 ... [详细]
  • 本文介绍了Sencha Touch的学习使用心得,主要包括搭建项目框架的过程。作者强调了使用MVC模式的重要性,并提供了一个干净的引用示例。文章还介绍了Index.html页面的作用,以及如何通过链接样式表来改变全局风格。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 单页面应用 VS 多页面应用的区别和适用场景
    本文主要介绍了单页面应用(SPA)和多页面应用(MPA)的区别和适用场景。单页面应用只有一个主页面,所有内容都包含在主页面中,页面切换快但需要做相关的调优;多页面应用有多个独立的页面,每个页面都要加载相关资源,页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ... [详细]
  • Spring源码解密之默认标签的解析方式分析
    本文分析了Spring源码解密中默认标签的解析方式。通过对命名空间的判断,区分默认命名空间和自定义命名空间,并采用不同的解析方式。其中,bean标签的解析最为复杂和重要。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • Linux重启网络命令实例及关机和重启示例教程
    本文介绍了Linux系统中重启网络命令的实例,以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法,以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]
  • 开发笔记:加密&json&StringIO模块&BytesIO模块
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ... [详细]
  • HDFS2.x新特性
    一、集群间数据拷贝scp实现两个远程主机之间的文件复制scp-rhello.txtroothadoop103:useratguiguhello.txt推pushscp-rr ... [详细]
  • web.py开发web 第八章 Formalchemy 服务端验证方法
    本文介绍了在web.py开发中使用Formalchemy进行服务端表单数据验证的方法。以User表单为例,详细说明了对各字段的验证要求,包括必填、长度限制、唯一性等。同时介绍了如何自定义验证方法来实现验证唯一性和两个密码是否相等的功能。该文提供了相关代码示例。 ... [详细]
author-avatar
lluuaalulua619
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有