Skip to content
陈随易陈随易
我的博客
    • 目录含义
      • 路由管理
        • 构建打包
          • 项目部署
            • main.js入口
              • 静态资源
                • css预处理
                  • 路径别名
                    • 样式组织
                      • 页面分配
                        • 全局组件
                          • 插件导入

                          路由管理

                          陈随易原创2022年5月8日
                          • 开源项目
                          • yicode-cli
                          大约 2 分钟

                          # 路由管理

                          路由管理,对于一般项目,关系不大。

                          因为,yicode 会自动加载路由,从工具层面,屏蔽了这细节。

                          其他项目的路由管理如下:

                          /** When your routing table is too long, you can split it into small modules **/
                          
                          import Layout from "@/layout";
                          
                          const componentsRouter = {
                              path: "/components",
                              component: Layout,
                              redirect: "noRedirect",
                              name: "ComponentDemo",
                              meta: {
                                  title: "Components",
                                  icon: "component",
                              },
                              children: [
                                  {
                                      path: "tinymce",
                                      component: () => import("@/views/components-demo/tinymce"),
                                      name: "TinymceDemo",
                                      meta: { title: "Tinymce" },
                                  },
                                  {
                                      path: "markdown",
                                      component: () => import("@/views/components-demo/markdown"),
                                      name: "MarkdownDemo",
                                      meta: { title: "Markdown" },
                                  },
                                  {
                                      path: "json-editor",
                                      component: () => import("@/views/components-demo/json-editor"),
                                      name: "JsonEditorDemo",
                                      meta: { title: "JSON Editor" },
                                  },
                                  {
                                      path: "split-pane",
                                      component: () => import("@/views/components-demo/split-pane"),
                                      name: "SplitpaneDemo",
                                      meta: { title: "SplitPane" },
                                  },
                                  {
                                      path: "avatar-upload",
                                      component: () => import("@/views/components-demo/avatar-upload"),
                                      name: "AvatarUploadDemo",
                                      meta: { title: "Upload" },
                                  },
                                  {
                                      path: "dropzone",
                                      component: () => import("@/views/components-demo/dropzone"),
                                      name: "DropzoneDemo",
                                      meta: { title: "Dropzone" },
                                  },
                                  {
                                      path: "sticky",
                                      component: () => import("@/views/components-demo/sticky"),
                                      name: "StickyDemo",
                                      meta: { title: "Sticky" },
                                  },
                                  {
                                      path: "count-to",
                                      component: () => import("@/views/components-demo/count-to"),
                                      name: "CountToDemo",
                                      meta: { title: "Count To" },
                                  },
                                  {
                                      path: "mixin",
                                      component: () => import("@/views/components-demo/mixin"),
                                      name: "ComponentMixinDemo",
                                      meta: { title: "Component Mixin" },
                                  },
                                  {
                                      path: "back-to-top",
                                      component: () => import("@/views/components-demo/back-to-top"),
                                      name: "BackToTopDemo",
                                      meta: { title: "Back To Top" },
                                  },
                                  {
                                      path: "drag-dialog",
                                      component: () => import("@/views/components-demo/drag-dialog"),
                                      name: "DragDialogDemo",
                                      meta: { title: "Drag Dialog" },
                                  },
                                  {
                                      path: "drag-select",
                                      component: () => import("@/views/components-demo/drag-select"),
                                      name: "DragSelectDemo",
                                      meta: { title: "Drag Select" },
                                  },
                                  {
                                      path: "dnd-list",
                                      component: () => import("@/views/components-demo/dnd-list"),
                                      name: "DndListDemo",
                                      meta: { title: "Dnd List" },
                                  },
                                  {
                                      path: "drag-kanban",
                                      component: () => import("@/views/components-demo/drag-kanban"),
                                      name: "DragKanbanDemo",
                                      meta: { title: "Drag Kanban" },
                                  },
                              ],
                          };
                          
                          export default componentsRouter;
                          
                          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

                          使用 yicode 后,路由分散到了每个页面目录的 route.js 下,同时变成如下:

                          export default {
                              path: "/",
                              /**
                               * layout 框架层
                               * 此处采用默认的 default 框架
                               * 如果默认框架不符合你的需求,请不要删除此框架层的导入
                               * 直接修改 layout/default 目录下的默认框架层代码即可
                               * 如果是类似官网项目,不需要框架层,也请不要将此框架层移除
                               * 当做有一个全屏的框架层即可,提高需求变更的灵活性
                               * 也给自己留一条退路(其实主要是框架作者的强迫症)
                               * 如有问题或建议,请联系作者:chensuiyi.com
                               */
                              component: () => import("@src/layout/default/index.vue"),
                              children: [
                                  {
                                      path: "/",
                                      component: () => import("@src/pages/index/index.vue"),
                                  },
                              ],
                          };
                          
                          1
                          2
                          3
                          4
                          5
                          6
                          7
                          8
                          9
                          10
                          11
                          12
                          13
                          14
                          15
                          16
                          17
                          18
                          19
                          20

                          不管是管理方式还是维护,都方便了很多。

                          不过,目前 yicode 的路由模式还不够强大,作者正在推出更强大,适用场景更多,适合更大型项目的路由管理方式。

                          敬请期待。

                          上次编辑于: 2022/5/8 下午1:50:01
                          贡献者: chensuiyi
                          上一页
                          目录含义
                          下一页
                          构建打包
                          何以解忧,唯有代码
                          Copyright © 2022 陈随易

                          该应用可以安装在你的 PC 或移动设备上。这将使该 Web 应用程序外观和行为与其他应用程序相同。它将在出现在应用程序列表中,并可以固定到主屏幕,开始菜单或任务栏。此 Web 应用程序还将能够与其他应用程序和你的操作系统安全地进行交互。

                          详情