项目路由配置存放于 src/router/routers 下面。 src/router/routers/modules用于存放路由模块，在该目录下的文件会自动注册。
模块说明
路由分为前端本地路由和后端返回路由，前端本地路由配置在 src/router/routers/modules 内的 .ts 文件会被视为一个路由模块。
项目登录后后端返回的路由和前端写死的路由会进行合并，最终组成整个路由结构。按照配置中的排序字段来进行排序。
一个前端本地路由模块包含以下结构：
import type { AppRouteRecordRaw } from "/@/router/Types";
import { LAYOUT } from "/@/router/Constant";
import { t } from "/@/hooks/web/UseI18n";
const flows: AppRouteRecordRaw = {
path: "/flow",
name: "FlowDemo",
component: LAYOUT,
redirect: "/flow/flowChart",
meta: {
menuSort: 18,
icon: "tabler:chart-dots",
title: t("routes.demo.flow.name")
},
children: [
{
path: "flowChart",
name: "flowChartDemo",
component: () => import("/@/views/demo/flow-chart/index.vue"),
meta: {
title: t("routes.demo.flow.flowChart")
}
}
]
};
export default flows;
多级路由
注意事项
- 整个项目所有路由 name 不能重复
- 所有的多级路由最终都会转成二级路由，所以不能内嵌子路由
- 除了 layout 对应的 path 前面需要加 /，其余子路由都不要以/开头
示例
import { AppRouteRecordRaw } from "/@/router/Types";
import { LAYOUT } from "/@/router/Constant";
const moreLevel: AppRouteRecordRaw = {
name: "多级目录",
path: "/test",
component: LAYOUT,
meta: {
title: "多级目录",
icon: "ion:folder-open-outline",
hideMenu: false,
menuSort: 10
},
children: [
{
name: "目录1",
path: "menu1",
meta: {
title: "目录1",
icon: "ion:folder-open-outline",
hideMenu: false,
menuSort: 1
},
children: [{
path: "/test/test1/test2",
name: "目录2",
meta: {
title: "目录2",
icon: "ion:folder-open-outline",
hideMenu: false,
menuSort: 1
},
children: [
{
path: "/test/test1/test2/test3",
name: "多级菜单",
meta: {
title: "多级菜单",
icon: "ant-design:appstore-outlined",
hideMenu: false,
menuSort: 1,
ignoreKeepAlive: false
},
component: () => import("/@/views/demo/flow-chart/index.vue")
}
]
}]
}
],
redirect: "/test/test1/test2/test3"
};
export default moreLevel;
外部页面嵌套
只需要将 frameSrc 设置为需要跳转的地址即可
const IFrame = () => import('/@/views/sys/iframe/FrameBlank.vue');
const Frame: AppRouteRecordRaw = {
path: "doc",
name: "Doc",
component: IFrame,
meta: {
frameSrc: "http://www.mfish.com.cn/",
title: t("routes.demo.iframe.doc")
}
}
外链
只需要将 path 设置为需要跳转的HTTP 地址即可
{
name: "1ce2ac44228e37c063e9cd55ed8f0a49",
path: "https://github.com/mfish-qf/mfish-nocode",
meta: {
title: "Git地址",
icon: "ion:logo-github",
hideMenu: false,
menuSort: 2,
ignoreKeepAlive: false,
frameSrc: "https://github.com/mfish-qf/mfish-nocode"
}
}
后端返回路由
- 多级目录配置
多级目录
- 外部页面嵌套
外部页面嵌套
- 外链
外链