react - 根据路由生成菜单

前端小趴菜052025-07-17 19:43

后端返回菜单的格式

javascript 复制代码

menuList:[
        {
          index: true,
          name: "",
          component: "../views/Home",
          meta: { title: "首页", requiresAuth: true,roles:['user']},
        },
        {
          path: "/admin",
          name: "admin",
          meta: { title: "管理页", roles: ["admin"] },
          children: [
            {
              path: "/admin/user",
              name: "User",
              component: "@/pages/Admin/User",
              meta: { title: "用户管理" },
              children: [
            {
              path: "/admin/user",
              name: "User",
              component: "@/pages/Admin/User",
              meta: { title: "用户管理1" },
            },
          ],
            },
          ],
        },
      ],

递归转换 menuList 为 Ant Design Menu 的 items 格式

javascript 复制代码

const convertMenuListToItems = (menuList: any[]): MenuItem[] => {
  return menuList.map((menu) => {
    const item: any = {
      key: menu.path || menu.name, // 使用 path 或 name 作为 key
      label: menu.meta?.title || menu.name, // 显示标题
    };
 
    // 如果有子菜单，递归处理
    if (menu.children) {
      item.children = convertMenuListToItems(menu.children);
    }
 
    // 如果是 index 路由，可以标记特殊 key（可选）
    if (menu.index) {
      item.key = 'home'; // 强制指定 key，避免重复
    }
 
    return item;
  });
};






const Menu1: React.FC = () => {
  const { menuList } = useBoundStore()
const items =convertMenuListToItems(menuList)

  const [current, setCurrent] = useState('mail');

  const onClick: MenuProps['onClick'] = (e) => {
    console.log('click ', e);
    setCurrent(e.key);
  };

  return <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} style={{display:'flex',justifyContent:'center',alignItems:'center'}}/>;
};

export default Menu1;