路由管理
原创2022年5月8日
路由管理
路由管理,对于一般项目,关系不大。
因为,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 的路由模式还不够强大,作者正在推出更强大,适用场景更多,适合更大型项目的路由管理方式。
敬请期待。