新增菜单路由

约 1035 字大约 3 分钟

2026-05-13

概述

MSLX 的插件系统允许您在网页控制台的前端新增菜单路由，效果如下：

新增的菜单配置均在插件的入口文件中导出的 pluginConfig 集合中的 routes 数组。

具体示例可参考 mslx-plugin-demo 插件的插件入口示例：mslx-plugin-demo/Frontend/src/pluginEntry.ts at main · MSLTeam/mslx-plugin-demo

新增一级菜单

pathRequiredstring

新增的路由地址

nameRequiredstring

路由名字（建议带上插件名字，以防和其他插件或宿主冲突）

componentRequiredstring

HOST_LAYOUT

新增一级菜单请填写 HOST_LAYOUT 即可

meta.titleRequiredstring

新增的菜单标题

meta.iconRequiredstring

新增菜单的icon （仅支持使用tdesign的icon组件哦）

meta.roleCodearray

新增菜单的可见范围，默认是所有用户可见

children[0].pathRequiredstring

新增的路由地址（因为是新增一级菜单，这里一般留空即可）

children[0].nameRequiredstring

子路由名字（建议带上插件名字，以防和其他插件或宿主冲突）

children[0].componentRequiredstring

插入的组件（需要在插件入口顶部Import相应组件）

children[0].meta.titleRequiredstring

新增的菜单标题

children[0].meta.hiddenRequiredboolean

由于是只有一级菜单，这里直接填 true。（注：将子路由设为 hidden 是为了在侧边栏仅显示一级菜单项，而点击时渲染该子路由组件。）

children[0].meta.roleCodearray

新增菜单的可见范围，默认是所有用户可见

        {
            path: '/plugin-single',
            name: 'PluginSingleBase',
            component: 'HOST_LAYOUT',
            meta: { title: '插件单页', icon: 'app', roleCode: ['admin', 'user'] },
            children: [
                {
                    path: '',
                    name: 'PluginSingle',
                    component: DemoPage,
                    meta: { title: '插件单页', hidden: true, roleCode: ['admin', 'user'] },
                },
            ],
        },

新增一级和二级菜单

pathRequiredstring

新增的一级路由前缀地址

nameRequiredstring

一级路由名字（建议带上插件名字，以防和其他插件或宿主冲突）

componentRequiredstring

HOST_LAYOUT

新增一级菜单请填写 HOST_LAYOUT 即可

meta.titleRequiredstring

新增的一级菜单标题

meta.iconRequiredstring

新增一级菜单的icon （仅支持使用tdesign的icon组件哦）

meta.roleCodearray

新增一级菜单的可见范围，默认是所有用户可见

children[i].pathRequiredstring

新增的二级菜单路由地址

children[i].nameRequiredstring

二级菜单路由名字（建议带上插件名字，以防和其他插件或宿主冲突）

children[i].componentRequiredstring

插入的组件（需要在插件入口顶部Import相应组件）

children[i].meta.titleRequiredstring

新增的二级菜单标题

children[i].meta.iconstring

新增二级菜单的icon （仅支持使用tdesign的icon组件哦）

children[i].meta.roleCodearray

新增菜单的可见范围，默认是所有用户可见

        {
            path: '/plugin-multi',
            name: 'PluginMultiBase',
            component: 'HOST_LAYOUT',
            meta: { title: '插件多页', icon: 'layers', roleCode: ['admin', 'user'] },
            children: [
                {
                    path: 'page-a',
                    name: 'PluginMultiA',
                    component: DemoPage,
                    meta: { title: '子页面A', roleCode: ['admin', 'user'] },
                },
                {
                    path: 'page-b',
                    name: 'PluginMultiB',
                    component: DemoPage,
                    meta: { title: '子页面B', roleCode: ['admin', 'user'] },
                },
            ],
        },

插入原有一级菜单

parentNameRequiredstring

需要插入的一级菜单的名字，可以在这里查询可选值，下面也列出来常见的三个一级菜单：

MSLX/MSLX.WebPanel/src/router/modules at dev · MSLTeam/MSLX

instance (服务端管理)
frp (隧道管理)
settingsBase (设置)

pathRequiredstring

插入的二级菜单路由地址

nameRequiredstring

路由名字（建议带上插件名字，以防和其他插件或宿主冲突）

componentRequiredstring

导入组件（记得import哦）

meta.titleRequiredstring

新增的二级路由菜单标题

meta.iconRequiredstring

新增二级菜单的icon （仅支持使用tdesign的icon组件哦）

meta.roleCodearray

新增菜单的可见范围，默认是所有用户可见

        {
            parentName: 'instance',
            path: 'plugin-extra',
            name: 'PluginNestedSetting',
            component: DemoPage,
            meta: { title: '插件子菜单', icon: 'control-platform', roleCode: ['admin', 'user'] },
        }