antdp | 菜单展示-菜单路由配置

最新推荐文章于 2025-03-03 21:46:28 发布

m0_57195758

最新推荐文章于 2025-03-03 21:46:28 发布

阅读量390

点赞数 3

分类专栏：分享文章标签：数据库前端 antdp

本文链接：https://blog.csdn.net/m0_57195758/article/details/137079811

版权

分享专栏收录该内容

486 篇文章

订阅专栏

本文介绍了Umi框架中的Layout插件如何扩展路由配置，支持自定义菜单显示、权限控制等功能，通过`config/route.ts`提供详细的配置示例，强调与权限插件如plugin-access的集成应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

扩展的路由配置

Layout 插件会基于 umi 的路由，封装了更多的配置项，支持更多配置式的能力。新增：

- 侧边栏菜单配置
- 布局路由级别展示 / 隐藏相关配置
- 与权限插件结合，配置式实现权限路由的功能

示例如下：

//config/route.ts
export const routes: IBestAFSRoute[] = [
  {
    path: '/welcome',
    component: 'IndexPage',
    name: '欢迎', // 兼容此写法
    icon: 'testicon',
    // 更多功能查看
    // https://beta-pro.ant.design/docs/advanced-menu
    // ---
    // 新页面打开
    target: '_blank',
    // 不展示顶栏
    headerRender: false,
    // 不展示页脚
    footerRender: false,
    // 不展示菜单
    menuRender: false,
    // 不展示菜单顶栏
    menuHeaderRender: false,
    // 权限配置，需要与 plugin-access 插件配合使用
    access: 'canRead',
    // 隐藏子菜单
    hideChildrenInMenu: true,
    // 隐藏自己和子菜单
    hideInMenu: true,
    // 在面包屑中隐藏
    hideInBreadcrumb: true,
    // 子项往上提，仍旧展示,
    flatMenu: true,
  },
];