ant design pro中的面包屑

hideInMenu: true 的面包屑不会显示

{
            path: '/testBread/advanced-profile',
            name: 'advanced-profile',
            hideInMenu: true,
            component: './TestBread/AdvancedProfile'
          },

如果hideInMenu: true要显示面包屑, 进行下面的更改

// const breadcrumbNameMap = memoizeOneGetBreadcrumbNameMap(menuData);//面包屑过滤掉hideInMenu: true,遇到这个菜单不显示当前它的面包屑
const breadcrumbNameMap = memoizeOneGetBreadcrumbNameMap(memoizeOneFormatter(routes, authority));//面包屑过滤掉hideInMenu: true,遇到这个菜单不显示当前它的面包屑

在不隐藏菜单、’同时该菜单也有component、并且它也不是最终子菜单时,希望该面包屑显示成普通span标签,不显示成默认的a跳转标签。可以给该路由添加一个属性:noShowLinkBread,然后再到breadcrumb.js找到生成面包屑的相关代码conversionFromLocation这个函数进行修改即可。

{
        path: '/testBread',
        name: 'testBread',
        icon: 'profile',
        authority: ['admin'],
        component: './TestBread',
        noShowLinkBread: true,//面包屑中显示时就不会因为有component就必须是可点击的了, 看src\components\PageHeader\breadcrumb.js的93行
        routes: [
          {
            path: '/testBread/basic-profile',
            name: 'basic-profile',
            component: './TestBread/BasicProfile'
          }
        ]
      },


      const isLinkable = index !== pathSnippets.length - 1 && currentBreadcrumb.component && !currentBreadcrumb.noShowLinkBread;

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在我们的站点中都有很多的页面,利用面包屑路径能够极大的增强用户寻找路径的能力。从易用性上来讲,面包屑路径减少了用户...
    xRichard阅读 2,031评论 0 1
  • lzlz000的个人主页 elment-ui提供了面包屑组件 el-breadcrumb 然而他要配合url跳转路...
    楼主楼主阅读 3,531评论 0 1
  • 今天学习中,在jsp代码中,有这样一句代码: 您的当前位置:其他功能 > 练习测试 因为是菜鸟小白,只能依靠百度了...
    路小漫阅读 2,382评论 0 0
  • 学习有时候很枯燥,我们要找点乐子给自己。今儿说一下我觉得很有趣的两个单词Breadcrumb&Toasts。一如即...
    鲜核桃阅读 1,092评论 1 2
  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    余生动听阅读 10,925评论 0 11

友情链接更多精彩内容