路由管理

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

因为，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;

使用 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"),
        },
    ],
};

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

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

敬请期待。