Ant Design Pro 动态菜单_荣轩浩的博客-CSDN博客_ant design pro 菜单
Ant Design Pro 动态菜单
置顶
荣轩浩
于 2018-09-15 14:21:20 发布
19853
收藏
13
分类专栏：
Ant Design Pro
动态菜单
文章标签：
Ant Design Pro
动态菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1_a1_a/article/details/82713492
版权
Ant Design Pro
同时被 2 个专栏收录
0 篇文章
0 订阅
订阅专栏
动态菜单
1 篇文章
0 订阅
订阅专栏
在刚接触Ant Design Pro时发现，它的路由是由router.config.js文件来配置的，所以它是静态的，但是我们的实际项目中可能存在着需要动态配置路由的情况，我们就来写一下动态菜单。如下是官网给出的动态菜单的方法，非常简单的一句话。
步骤：
1：config/router.config.js：需要配置所有页面的路由参数；
2：src/layouts/BasicLayout.js：
链接model与获取到menuData数据
在获取面包屑映射的时候配置state数据
在render中获取到menuData的数据
3：src/models/menuTree.js代码如下：
import { queryMenu } from '@/services/menuTree';
export default {
namespace: 'menuTree',
state: {
menuData: [],
},
effects: {
*getMenu(_, { call, put }) {
const response = yield call(queryMenu);
yield put({
type: 'menuResult',
payload: response,
});
},
},
reducers: {
menuResult(state, action) {
return {
...state,
menuData: action.payload,
};
},
},
};
4：src/services/menuTree.js代码如下
import request from '@/utils/request';
export async function queryMenu() {
return request('/menu/getMenuTree');
5：mock/Menu.js中配置你所需要的路由参数，这边就是配置所需要显示的动态路由，实际项目中就要使用真实的路由参数，这边仅作测试使用！
我这边仅显示部分代码。
6：src/locales/zh-CN.js与src/locales/en-US.js中配置相应路由的显示名称！
以上就是Ant Design Pro 动态菜单的所有步骤，具体我就不再描述了。
代码我已经上传到csdn：
地址：https://download.csdn.net/download/a1_a1_a/10707053
不足之处请大家多多理解与赐教！
荣轩浩
关注
关注
点赞
13
收藏
打赏
31
评论
Ant Design Pro 动态菜单
 在刚接触Ant Design Pro时发现，它的路由是由router.config.js文件来配置的，所以它是静态的，但是我们的实际项目中可能存在着需要动态配置路由的情况，我们就来写一下动态菜单。如下是官网给出的动态菜单的方法，非常简单的一句话。步骤：1：config/router.config.js：需要配置所有页面的路由参数；2：src/layouts/BasicLayo...
复制链接
扫一扫
专栏目录
ant design pro动态菜单
03-30
自己写的ant design pro动态菜单，不足请指正，互相学习借鉴！ 自己写的ant design pro动态菜单，不足请指正，互相学习借鉴！
ant design pro v5 - 05 顶部菜单 - 最大化按钮
haiyabtx
10-18
52
React + TypeScript + Ant Design Pro V5.2
开箱即用的中台前端/设计解决方案。顶部菜单 最大化按钮
评论 31
您还未登录，请先
登录
后发表或查看评论
ant-design-pro 动态菜单配置Icon和菜单权限显隐控制
iorn_mangg的博客
06-02
5184
ant-design-pro 修改为动态菜单有很多大佬都给了解决方法，就不多说直接进入怎么配置动态icon！！！！
在配置动态菜单时发现，后台接口返回的路由必须要在config.ts中的routes配置，才能正常显示。这下route都确定好了，route中的icon也是确定的，即使接口数据icon不一样，显示依旧会出问题，会显示icon的文字。
所以我们就要自定义menu的样式了。
首先在BasicLayout.tsx中查看代码，我的是v4版本，用的是proLayout来搭建的菜单框架，githu
vue3 antd多级动态菜单（一）后台管理系统（v-for循环）
最新发布
XSL_HR的博客
11-12
677
一个完整的后台管理系统一定离不开各个分工的页面，其中作为门户的是登录页面，登录后的页面为主页面。顾名思义，主页面能够容纳所有的元素，实现各种跳转。主页面包括导航栏（左侧和顶部）、主要内容区。本期文章将用v-for循环实现多级菜单栏。下期文章将分享菜单栏的优化版本，解决对children的判断。
在Ant Design Pro中实现动态获取菜单
hanxiaozhang的博客
08-14
2258
前言：
ant design pro v5 动态菜单
啊彬(Net)
04-22
1232
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 动态路由的实现
黄孝果的博客
03-19
3432
提供登录与获取用户信息数据接口
import request from '@/utils/request';
/**
* @returns 首页列表权限
*/
export async function queryCurrent():Promise<any>{
return request('/user/info2', {
prefix:'/mock',
method: 'GET',
});
登录接口数据
{'code': 200, 'data'.
ant-design-pro 动态菜单-路由详解
热门推荐
埃尔斯的博客
03-20
1万+
ant-design-pro 动态菜单-路由详解
最近利用ant-design-pro开发项目要实现之前的项目嵌入到新项目里来，并且根据和后台的接口返回的数据显示侧边栏菜单。既然是是利用别人的架构那当然是从文档中找实现的方法，终于不负苦心人在https://pro.ant.design/docs/router-and-nav-cn文档那里找到初步的解决方法
进入src/layouts/Basil...
antDesign实现动态菜单+动态路由
qq_39558062的博客
12-20
2453
配置菜单路由权限有几种方式：
防君子不防小人
菜单栏虽然没有页面权限，但可以输入url访问没有权限的页面
统统防着
这就需要动态路由
实现动态菜单
待更新
实现动态路由
实现思路是使用Umi的运行时配置
提供了几个方法，其中patchRender和render配置配合使用，请求服务端根据响应动态更新路由
patchRender({ routes })：用于修改路由
render(oldRender)：用于渲染之前做权限校验
实现步骤
src目录下新建app.ts
app.ts中重写patchRende
antd pro v5 react动态路由（非动态菜单）
kabudada的博客
06-21
1042
注： 这里说的动态路由不是真的动态路由，只是借助全量菜单达到想通的功能效果
项目背景： antd pro v5 react ，要实现的功能是：admin在页面可新增功能模块与menu对应，而不是单纯地勾选已有菜单的展示与隐藏，换句话说：需要访问路由文件中没有的路径（不可能，意思是这样）......
Ant Design Pro V5 动态菜单
m0_46503594的博客
04-23
1141
记录一次Ant Design Pro V5动态菜单实现以及解决图标问题的过程
Ant Design Pro 4 动态菜单icon丢失解决办法
IT侠客行的博客
09-27
623
最近在开发人事管理系统，其中菜单是需要动态渲染，针对不同角色授权不同的菜单权限。
路由由后端返回，格式如下：
[ { "path": "/", "name": "dashboard", "icon": "DesktopOutlined", "component": "./dashboard/workplace", }, { "name": "management", "path": "/auth", "icon": "TeamOutlined", "children": [ { "name": ..
Ant Design Pro V2动态菜单实现
虚怀若愚
12-11
660
文章目录前言实现效果前端实现过程官网文档BasicLayout组件中调用model/menu.jsmodel/menu.js中引入serviceservice中定义后端API后端实现过程定义菜单类定义控制器效果验证
前言
Ant Design Pro是蚂蚁金服团队出品的一款前端框架，安装完毕后可以看到菜单和路由是静态渲染的，在实际的开发过程中，经常需要根据用户名或者权限生成不同的菜单，下面介绍一下...
Ant Design Pro of Vue 自制动态菜单
weixin_49537001的博客
07-21
2473
Ant Design of Vue
关于动态菜单的生成
项目较小时可以自己做动态菜单，代码简洁！！！
1、后端返回的菜单
2、格式化数据
export const listToTree = (list, tree, parentId) => {
list.forEach(item => {
// 判断是否为父级菜单
if (item.parentId == parentId) {
const child = {
path: item.url,
ant design pro v5: 动态菜单渲染以及图标渲染
Jidahan的博客
12-03
2844
Pro v5目前依然是beta版本，但是老夫在俩个月前已经迫不及待的上手搞了搞，有关v5对比之前版本有哪些改变，可以说，增加了很多Pro组件，并且ProComponents一直在更新迭代；同时优化了umi-request等很多，具体可以查看官方文档
从服务端请求菜单
在某些情况下，写死的菜单数据可能满足不了我们的需求，Pro 也提供了相应的解决方案来进行远程的菜单数据请求。这里我们需要用到两个 API 来配置完成。menuDataRender 可以自定义数据格式， menu.loading 可以让 menu
ant design pro新版本动态菜单
12-26
基于12月版本的ant design pro开源项目的动态菜单生成的完整方法附代码，粘贴就可使用，简单方便。内含解说。直接能用，本人亲测，非诚勿扰！！！
antd-pro(V5)动态菜单
qq_27175079的博客
12-30
3867
一般情况下登录系统后菜单是由后端返回的，不是前端写死的。antd-pro也支持，修改的路径在app.tsx
在 layout 里加一个menuDataRender字段先给一个() =>[]可以看到左侧菜单没了，说明配置生效了，接下来就可以围绕这个配置做文章了，我们先定义一个 menuDataRender方法。根据登录缓存到本地的数据做下处理，判断菜单里要展示哪些内容（比如替换字段，隐藏不显示的菜单，隐藏按钮等），处理好了后返回一个数组结构即可。
示例代码如下
export const layout:
【Ant Design Pro】使用ant design pro做为你的开发模板（七）如何动态加载菜单列表
梦想成为全栈的切图仔
09-26
396
哈喽，朋友们好久不见，这两周忙着实际工作的事情，所以没有更新，不知不觉我们已经针对ant design pro的研究已经到了第七章。越来越深入的了解，让我们可能都有点跟不上，但是在此还是希望伙伴们能够沉下心，细心的跟敲，我们把这些代码吃透吃够就行。本章第七章，我们来一起看看 Ant design pro 如何动态加载左侧菜单。
antd-pro(V5)动态菜单之动态icon
qq_27175079的博客
01-05
2996
之前做动态菜单的时候没有注意到Icon的问题，以为简单的加个参数即可，后面发现生成的是文本。
在网上找了些资料，或者要引入全部的icons，或者写乱七八糟的方法，但是结合实际项目，这两种都不是我想要的。
实际上项目开发中的菜单icon应该是设计师给的矢量图，上传到iconfont上生成字体图标，然后在项目里使用。antd-pro里使用iconfont不难，主要步骤如下：
1.在iconfont上挑选或者上传图标，下载到项目中
2.在global.less引入字体图标
3.app.tsx页面menuDataR
Antd vue左侧动态菜单刷新自动展开选中并只能展开一个
qq_35069272的博客
03-20
1万+
用ANTD-Vue做管理页面的左侧菜单 需要在刷新后也能保持左侧菜单被选中和展开 且只能展开一个菜单
成品效果图
1.在刷新后保持菜单选中
这个比较简单
ANTD的API中提供了一个defaultSelectedKeys参数
描述：初始选中的菜单项 key 数组
类型： string[] 自己手动实验得知意思就是在数组中填入字符串 例如[‘key’]
默认值为空
一级菜单和子菜单都有一个key属......
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：黑客帝国
设计师：我叫白小胖
返回首页
荣轩浩
CSDN认证博客专家
CSDN认证企业博客
码龄6年
暂无认证
13
原创
18万+
周排名
167万+
总排名
10万+
访问
等级
864
积分
37
粉丝
55
获赞
76
评论
157
收藏
私信
关注
热门文章
Python tkinter实现先弹出选择框后弹出输入框，并得到输入框的值
26758
Python+opencv+tkinter整合demo完成！
20226
Ant Design Pro 动态菜单
19853
Tensorflow 释放内存
14740
Ionic3+GPS定位
6148
分类专栏
tkinter
2篇
Python
3篇
opencv
1篇
Java
人脸识别
人脸检测
springMVC
SpringBoot
ionic3
6篇
ECharts
1篇
AntV
1篇
viser-ng
1篇
GPS
1篇
Tensorfow
2篇
tensorflowjs
1篇
tfjs
1篇
回调函数
1篇
H5
1篇
HTML
1篇
CSS3
1篇
JS
1篇
码云
1篇
matlab
1篇
香农编码
1篇
Ant Design Pro
动态菜单
1篇
最新评论
Python+opencv+tkinter整合demo完成！
机械飞升君:
就喜欢这么干脆的
Ant Design Pro 动态菜单
荣轩浩:
这个是配置用户的访问，你在用户访问页面的时候进行请求给后台，判断用户是否有权限，如果没有权限的话则禁止访问
Ant Design Pro 动态菜单
runrun117:
博主，这种方法是可以实现菜单的动态加载，但是由于配置在config.js里的所有路由信息，就会导致用户在浏览器地址栏输入路由地址的时候可以跳过菜单直接方法页面，这个有解决方法吗？
Python+opencv+tkinter整合demo完成！
IT勤学生
回复
eln:
使用cv2.VideoCapture(路径)函数实现的
Python+opencv+tkinter整合demo完成！
IT勤学生
回复
荣轩浩:
确实是延迟函数导致的，谢谢。
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
matlab香农编码
模仿码云中的年份贡献显示！
ionic3回调函数
2018年13篇
目录
目录
分类专栏
tkinter
2篇
Python
3篇
opencv
1篇
Java
人脸识别
人脸检测
springMVC
SpringBoot
ionic3
6篇
ECharts
1篇
AntV
1篇
viser-ng
1篇
GPS
1篇
Tensorfow
2篇
tensorflowjs
1篇
tfjs
1篇
回调函数
1篇
H5
1篇
HTML
1篇
CSS3
1篇
JS
1篇
码云
1篇
matlab
1篇
香农编码
1篇
Ant Design Pro
动态菜单
1篇
目录
评论 31
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
打赏作者
荣轩浩
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值