【Ant Design Pro】使用ant design pro做为你的开发模板（七）如何动态加载菜单列表

已于 2022-09-26 15:24:59 修改
阅读量888 收藏 2
点赞数
分类专栏： AntDesignPro从0到1开发指南 文章标签： ui 前端 javascript typescript react
于 2022-09-26 15:13:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31281245/article/details/127054100
版权
本文是Ant Design Pro使用系列的第七章，介绍了如何动态从服务器加载菜单列表并显示图标。通过理解ProLayout组件，学习如何获取router列表，设置icon，以及处理后台接口返回的数据结构。详细讲解了请求菜单数据的方法、处理递归结构、定义icon枚举，以及动态替换router的icon。最后，强调了params字段在用户信息变化时重新获取菜单数据的重要性。
摘要由CSDN通过智能技术生成

 Ant Design Pro 使用系列

第一章 【Ant Design Pro】使用ant design pro做为你的开发模板（一）拉取项目

第二章 【Ant Design Pro】使用ant design pro做为你的开发模板（二）新增一个页面与如何添加国际化

第三章 【Ant Design Pro】使用ant design pro做为你的开发模板（三） 接入mock数据做持续开发

第四章 【Ant Design Pro】使用ant design pro做为你的开发模板（四） 联调正式后台接口与运行时全局配置

第五章 【Ant Design Pro】使用ant design pro做为你的开发模板（五）去除无效代码，生成一个清晰的开发模板

第六章【Ant Design Pro】使用ant design pro做为你的开发模板（六）OpenAPI，快速管理你的请求接口

关于我：明月，从业前端开发，会Java，会前端，会产品，会测试，会大客户销售，有过职业规划经验，欢迎各位私信聊天。目标是创业实现上班自由。梦想明月天涯。

关于社区：笔者创建了【前端架构师】社区，希望各位架构师们能够一起加入，维护起前端技术交流区。https://bbs.csdn.net/forums/mi

了解本专栏 订阅专栏 解锁全文 超级会员免费看
赵小左
关注
专栏目录
订阅专栏
【Ant Design Pro】使用ant design pro做为你的开发模板（八）开发第一个完整的后台页面
梦想成为全栈的切图仔
09-28 1058
前面，我们从第一章的初识拉取项目一直到本章节的正式完成自己的 ant design pro的第一个页面，一路心酸，但是伙伴们能够看到这里也证明大家很优秀，至少坑被我们踩的差不多了，下来我们就跟随脚步一起写我们的第一个完成的页面吧~怎么样，是不是很简单，一个页面的搭建就是这样出来的，因为使用了现成的组件，所以需要东西都不需要我们操心，直接放置进来即可。本章就到这里，下一章节就给大家说一下，如何接通后台数据，以及弹框表单进行新增与删除。
【Ant Design Pro】使用ant design pro做为你的开发模板（完结篇）上线部署项目
梦想成为全栈的切图仔
09-30 1619
断断续续，接近一个月时间，我们终于到了最后一个章节，部署上线。回想之前我们从刚开始的拉取代码，到修改代码，新增页面，调用接口，维护菜单一直到现在的上线部署，十篇文章，虽然不多，但是基本上都涵盖了我们快速开发的要点，伙伴们，这篇终于到结尾了。跟着我的步骤，完成这篇文章，我们基本上可以下次很灵活的使用 Ant Design Pro 来进行开发了。快点一起来看看吧。
ant design pro动态菜单
03-30
自己写的ant design pro动态菜单，不足请指正，互相学习借鉴！ 自己写的ant design pro动态菜单，不足请指正，互相学习借鉴！
ant design pro v5 动态菜单
啊彬(Net)
04-22 1823
1.添加获取菜单请求（services/api.ts） export async function currentUserMenus() { return request<MenuDataItem[]>('/api/org/getUserMenus', { method: 'GET', }); } 2.修改app.tsx文件 1）修改getInitialState方法 export async function getInitialState(): Promise<{
ant design pro 如何实现动态菜单带上 icon 的
最新发布
求知久久编程学院
08-20 627
主要是 name children 这些比较重要，name 是显示出来的，children 是层级结构。当然还有 icon 之类的 还有 path ，也是要的，毕竟菜单要有路径的。如上图所示，这里的菜单是从后端动态得到的。只要你的后端能返回出这样的数据就行。我们拥有 12 年建站编程经验。
猿创征文 |【Ant Design Pro】使用ant design pro做为你的开发模板（六）OpenAPI，快速管理你的请求接口
梦想成为全栈的切图仔
09-09 1501
在之前的处理中，我们的项目 模板到目前为止已经基本具备了大多数功能，并且较为清晰，从本章开始，我们就要着重于实际开发，来解决伙伴们在日常开发中碰到的坑以及麻烦的事情，最大程度上的提高开发效率与开发规范。本章我们就来说一下前后端分离后，前端如何定义请求开发接口。
Ant Design Pro 动态菜单 V2 版本以上都适用的简单三步操作 Ant Design
03-26
Ant Design Pro 动态菜单 V2 版本以上都适用的简单三步操作 Ant Design 最近用Ant Design Pro，本版本V2.3.0 ，适应于版本V2.0以上的动态菜单，这样就可以请求后台返回菜单了。超级简单，自研究的，只需三步操作很棒很nice。
基于 umijs + electron + ant-design-pro 的项目模板开发代码
03-12
4. **ant-design-pro的使用**：掌握如何在项目中引入并使用`ant-design-pro`的组件，理解其主题定制和按需加载策略，以及如何自定义组件和页面。 5. **路由管理**：通过umi的路由机制，学习如何定义和配置路由，...
ant design pro新版本动态菜单
12-26
基于12月版本的ant design pro开源项目的动态菜单生成的完整方法附代码，粘贴就可使用，简单方便。内含解说。直接能用，本人亲测，非诚勿扰！！！
ant-design-pro 动态菜单-路由详解
热门推荐
埃尔斯的博客
03-20 2万+
ant-design-pro 动态菜单-路由详解 最近利用ant-design-pro开发项目要实现之前的项目嵌入到新项目里来，并且根据和后台的接口返回的数据显示侧边栏菜单。既然是是利用别人的架构那当然是从文档中找实现的方法，终于不负苦心人在https://pro.ant.design/docs/router-and-nav-cn文档那里找到初步的解决方法 进入src/layouts/Basil...
ant design pro添加菜单
wmnmtm的专栏
07-11 871
config.js { name: 'designer', icon: 'highlight', path: '/designer', routes: [ { name: 'prodesigner', icon: 'smile', path: '/designer/prodesigner', component: './designer/prodesigner', }, ], }, menu.js '...
ant design pro 动态菜单
m0_70947033的博客
01-22 598
可以先看官方文档的ProLayout - 高级布局, menu的request属性。
ant design pro 二级菜单_ant-design-pro 动态菜单-路由详解
weixin_39517797的博客
12-20 1506
ant-design-pro 动态菜单-路由详解最近利用ant-design-pro开发项目要实现之前的项目嵌入到新项目里来，并且根据和后台的接口返回的数据显示侧边栏菜单。既然是是利用别人的架构那当然是从文档中找实现的方法，终于不负苦心人在https://pro.ant.design/docs/router-and-nav-cn文档那里找到初步的解决方法进入src/layouts/Basilayo...
Ant Design Pro 动态菜单
荣轩浩
09-15 2万+
  在刚接触Ant Design Pro时发现，它的路由是由router.config.js文件来配置的，所以它是静态的，但是我们的实际项目中可能存在着需要动态配置路由的情况，我们就来写一下动态菜单。如下是官网给出的动态菜单的方法，非常简单的一句话。 步骤： 1：config/router.config.js：需要配置所有页面的路由参数； 2：src/layouts/BasicLayo...
ant design pro v5 - 03 动态菜单 动态路由（配置路由 动态登录路由 登录菜单）
haiyabtx
10-17 8996
React + TypeScript + Ant Design Pro V5.2 开箱即用的中台前端/设计解决方案。动态菜单 动态路由 （配置路由+动态登录路由）
Ant Design Pro 实现动态菜单
SongZhengxing_的博客
05-21 846
当我们使用了动态返回的菜单时，图标就不出现了，这时需要手动映射icon图标，可参考。中不存在的路由信息，页面将会无法访问，具体问题可参考（最终实现的效果，先给管理员和普通和用户分配不同的菜单。前提说明：实现动态路由时，所有的路由都必须提前在。的 layout 方法，在配置中添加。切换登录不同角色的用户，会显示不同的菜单。实现过程中遇到的问题以及解决方法。接口返回的data菜单格式和。这里二级菜单的图标没有，官方是。中注册好，如果动态返回了。属性即可实现动态菜单。
【ant design pro】使用ant design pro做为你的开发模板(...
09-16
使用 Ant Design Pro 作为开发模板具有以下几个优势： 首先，Ant Design Pro 提供了丰富而强大的组件库。这些组件包含了页面布局、表单、图表、数据展示等各种常用场景所需的组件，开发者可以直接调用，无需从头...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

赵小左

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值