热门标签 | 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 应用开发中,页面状态管理和跨页面数据传递是常见需求。本文将详细介绍 Vue Router 提供的两种有效方式,帮助开发者高效地实现页面间的数据交互与状态同步,同时分享一些最佳实践和注意事项。 ... [详细]
  • 如何将Python与Excel高效结合:常用操作技巧解析
    本文深入探讨了如何将Python与Excel高效结合,涵盖了一系列实用的操作技巧。文章内容详尽,步骤清晰,注重细节处理,旨在帮助读者掌握Python与Excel之间的无缝对接方法,提升数据处理效率。 ... [详细]
  • C++ 异步编程中获取线程执行结果的方法与技巧及其在前端开发中的应用探讨
    本文探讨了C++异步编程中获取线程执行结果的方法与技巧,并深入分析了这些技术在前端开发中的应用。通过对比不同的异步编程模型,本文详细介绍了如何高效地处理多线程任务,确保程序的稳定性和性能。同时,文章还结合实际案例,展示了这些方法在前端异步编程中的具体实现和优化策略。 ... [详细]
  • POJ 2482 星空中的星星:利用线段树与扫描线算法解决
    在《POJ 2482 星空中的星星》问题中,通过运用线段树和扫描线算法,可以高效地解决星星在窗口内的计数问题。该方法不仅能够快速处理大规模数据,还能确保时间复杂度的最优性,适用于各种复杂的星空模拟场景。 ... [详细]
  • 使用 Vuex 管理表单状态:当输入框失去焦点时自动恢复初始值 ... [详细]
  • Vue应用预渲染技术详解与实践 ... [详细]
  • 本文介绍了UUID(通用唯一标识符)的概念及其在JavaScript中生成Java兼容UUID的代码实现与优化技巧。UUID是一个128位的唯一标识符,广泛应用于分布式系统中以确保唯一性。文章详细探讨了如何利用JavaScript生成符合Java标准的UUID,并提供了多种优化方法,以提高生成效率和兼容性。 ... [详细]
  • [转]doc,ppt,xls文件格式转PDF格式http:blog.csdn.netlee353086articledetails7920355确实好用。需要注意的是#import ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 第二十五天接口、多态
    1.java是面向对象的语言。设计模式:接口接口类是从java里衍生出来的,不是python原生支持的主要用于继承里多继承抽象类是python原生支持的主要用于继承里的单继承但是接 ... [详细]
  • QT框架中事件循环机制及事件分发类详解
    在QT框架中,QCoreApplication类作为事件循环的核心组件,为应用程序提供了基础的事件处理机制。该类继承自QObject,负责管理和调度各种事件,确保程序能够响应用户操作和其他系统事件。通过事件循环,QCoreApplication实现了高效的事件分发和处理,使得应用程序能够保持流畅的运行状态。此外,QCoreApplication还提供了多种方法和信号槽机制,方便开发者进行事件的定制和扩展。 ... [详细]
  • 如何使用mysql_nd:Python连接MySQL数据库的优雅指南
    无论是进行机器学习、Web开发还是爬虫项目,数据库操作都是必不可少的一环。本文将详细介绍如何使用Python通过 `mysql_nd` 库与 MySQL 数据库进行高效连接和数据交互。内容涵盖以下几个方面: ... [详细]
  • 能够感知你情绪状态的智能机器人即将问世 | 科技前沿观察
    本周科技前沿报道了多项重要进展,包括美国多所高校在机器人技术和自动驾驶领域的最新研究成果,以及硅谷大型企业在智能硬件和深度学习技术上的突破性进展。特别值得一提的是,一款能够感知用户情绪状态的智能机器人即将问世,为未来的人机交互带来了全新的可能性。 ... [详细]
  • React项目基础教程第五课:深入解析组件间通信机制 ... [详细]
  • HBase Java API 进阶:过滤器详解与应用实例
    本文详细探讨了HBase 1.2.6版本中Java API的高级应用,重点介绍了过滤器的使用方法和实际案例。首先,文章对几种常见的HBase过滤器进行了概述,包括列前缀过滤器(ColumnPrefixFilter)和时间戳过滤器(TimestampsFilter)。此外,还详细讲解了分页过滤器(PageFilter)的实现原理及其在大数据查询中的应用场景。通过具体的代码示例,读者可以更好地理解和掌握这些过滤器的使用技巧,从而提高数据处理的效率和灵活性。 ... [详细]
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社区 版权所有