摸鱼低代码 mfish-nocode菜单
项目菜单配置存放于 src/router/menus 下面
提示
菜单必须和路由匹配才能显示，后台配置目录下面如果未配置菜单访问返回404
菜单项类型
ts
export interface Menu {
// 菜单名
name: string;
// 菜单图标,如果没有，则会尝试使用route.meta.icon
icon?: string;
// 菜单路径
path: string;
// 是否禁用
disabled?: boolean;
// 子菜单
children?: Menu[];
// 排序
menuSort?: number;
// 菜单标签设置
tag: {
// 为true则显示小圆点
dot: boolean;
// 内容
content: string;
// 类型
type: 'error' | 'primary' | 'warn' | 'success';
};
// 是否隐藏菜单
hideMenu?: boolean;
// 是否外部打开
isExternal?: boolean;
//隐藏子菜单，当只有一级菜单时为true
hideChildrenInMenu?: boolean;
}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
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
菜单模块
一个菜单文件会被当作一个模块
提示
children 的 path 字段不需要以/开头
ts
import type { MenuModule } from '/@/router/types';
import { t } from '/@/hooks/web/useI18n';
const menu: MenuModule = {
orderNo: 10,
menu: {
name: t('routes.dashboard.dashboard'),
path: '/dashboard',
children: [
{
path: 'analysis',
name: t('routes.dashboard.analysis'),
},
{
path: 'workbench',
name: t('routes.dashboard.workbench'),
},
],
},
};
export default menu;1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
以上模块会转化成以下结构
[
path: '/dashboard',
name: t('routes.dashboard.dashboard'),
children: [
{
path: 'dashboard/analysis',
name: t('routes.dashboard.analysis'),
},
{
path: 'dashboard/workbench',
name: t('routes.dashboard.workbench'),
},
],
]1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
新增菜单
新增菜单可以前端直接增加路由菜单，也可以通过后台管理系统配置菜单
前端新增
直接在 src/router/routers/modules 内新增一个模块文件即可。
不需要手动引入，放在src/router/routers/modules 内的文件会自动被加载。
后台新增
直接才系统管理->菜单管理中配置即可
菜单排序
在菜单模块内，设置 menuSort 变量，数值越大，排序越靠后