路由管理

2021-11-23 大约 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 的路由模式还不够强大,作者正在推出更强大,适用场景更多,适合更大型项目的路由管理方式。

敬请期待。

上次编辑于: 2021年11月23日 13:44
贡献者: chensuiyi