ant design pro项目中添加面包屑

最新推荐文章于 2024-07-02 21:30:36 发布

蓝枫秋千

最新推荐文章于 2024-07-02 21:30:36 发布

阅读量1w

点赞数 2

分类专栏： umi

本文链接：https://blog.csdn.net/qq_43382853/article/details/104311625

版权

umi 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

导入面包屑组件
import { PageHeaderWrapper } from '@ant-design/pro-layout';
在return的jsx最外层包裹面包屑组件

 <PageHeaderWrapper title="我的测试">
      这是我的测试页面
 </PageHeaderWrapper>

其中:title参数为面包屑下面的标题

在路由进行配置

{
  path: '/demo',
  name: '测试',
  hideInMenu: 'true',
  component: './demo'
},

其中:hideInMenu为隐藏左侧导航栏,否则话这个页面将在左侧导航栏中显示
这是没有隐藏的效果
在这里插入图片描述
这是隐藏了的效果

4. 如果要层级显示多层面包屑

 //角色管理模块的路由
 routes: [
 	//角色列表
     {
         path: '/user/role',
         name: 'role',
         locale: 'menu.user.role',
         component: './User/Role',
     },
     //角色添加
     {
         path: '/user/role/role-add',
         name: 'role-add',
         hideInMenu: 'true', //添加页不需要在menu上显示
         component: './User/RoleAdd',
     },
     //角色修改
     {
         path: '/user/role/role-mod/:id',
         name: 'role-mod',
         hideInMenu: 'true',
         component: './User/RoleMod',
     },
]

//在src/locales/menu.js中添加面包屑和列表的名称
  'menu.user.role': '角色管理',
  'menu.user.role-add': '角色添加',
  'menu.user.role-mod': '角色修改',
  
  
 //因为添加和修改页都加了hideInMenu属性，导致面包屑也不显示了，所以在src/models/menu.js上做修改
 
  effects: {
    *getMenuData({ payload }, { put }) {
      const { routes, authority } = payload;
      const menuData = filterMenuData(memoizeOneFormatter(routes, authority));
       // const breadcrumbNameMap = memoizeOneGetBreadcrumbNameMap(menuData); 这是原来的代码
         const breadcrumbNameMap = memoizeOneGetBreadcrumbNameMap(memoizeOneFormatter(routes, authority)); //这是修改后的代码，因为menuData是已经过滤掉存在hideInMenu
      yield put({
        type: 'save',
        payload: { menuData, breadcrumbNameMap },
      });
    },