Antd Pro V4 动态菜单设置

最新推荐文章于 2023-07-12 14:15:30 发布
最新推荐文章于 2023-07-12 14:15:30 发布
阅读量649 收藏
点赞数
分类专栏： Javascript 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rli091/article/details/118674323
版权

Antd Pro使用的umi配置静态路由，也可以从后台获取菜单，从后台获取菜单对菜单的权限进行管理，可以采用如下方法进行配置：

1 在config的route里引入config/route,使用route的path和component

2 在BasicLayout中写请求后台菜单的接口，设置state，将值赋给route

注意：将菜单的值赋给menuDataRender时，会出现数据需要页内刷新的情况，所以我直接修改了ProLayout的route属性，没有出现这种情况

二宫和也爱吃汉堡肉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
人力资源平台项目总结（2）
Lotus_fragrance的博客
10-10 737
目录1、路由和页面1.1 左侧菜单的显示逻辑，设置菜单图标 （重点！）2、组织架构2.1. 认识组织架构2.2 将树形的操作内容单独抽提成组件 2.3 获取组织架构数据，并进行树形处理(重点！)2.4 删除部门功能实现2.5 新增部门功能-建立组件 2.6 完成新增部门的规则校验 2.7 新增部门功能-部门负责人数据 2.8 新增功能-提交-取消-关闭 （新增知识sync修饰符）2.9 编辑部门功能实现数据回写 （新知识，获取组件实例可以调组件方法）2.10 同时支持编辑和新增场景 2.11 给数据获取添加
stand-admin-antdpro-demo:适用于Ant Design Pro的CRUD演示
04-07
StandAdmin Demo For Ant Design Pro StandAdmin is CRUD framework work perfectly with Antd Pro. 标准 CRUD 选取控件 多实例 批量操作 异形列表 异形查询 记录复制 多编辑 关联展开 新建初始值 数据转换-新建/编辑 数据转换-查询
FAQ: antd pro/umi 添加区块错误
01-08
虽然按照antd pro/umi官网构建的项目， 执行添加模块操作时： $ umi block add EmptyPage 或 $ umi block add https://github.com/umijs/umi-blocks/tree/master/demo 报出异常类似： × error AssertionError [ERR_ASSERTION]: C:\Users\用户名\.umi\blocks\github.com\umijs\umi-blocks\EmptyPage don't exists 解决方法： 到官方下载所有模块。 解压添加到C:\Users\用户名.u
浅谈Ant Design Pro 菜单自定义 icon
01-18
Ant Design Pro 官方文档说明 在菜单中使用自定义的 icon 由于 umi 的限制，在 router.config.js 是不能直接只是用组件的，Pro 中暂时支持 使用 ant.design 本身的 icon type，和传入一个 img 的 url。只需要直接在 icon 属性上配置即可，如果是个 url，Pro 会自动处理为一个 img 标签。 如果这样还不能满足需求，可以自定义 getIcon 方法。 如果你想使用 iconfont 的图标，你可以使用ant.desgin的自定义图标. 1. getIcon方法 /* eslint no-useless-escape:0
react实现antd线上主题动态切换功能
10-16
主要介绍了react实现antd线上主题动态切换功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Ant Design Pro 动态路由的实现
黄孝果的博客
03-19 5694
提供登录与获取用户信息数据接口 import request from '@/utils/request'; /** * * @returns 首页列表权限 */ export async function queryCurrent():Promise<any>{ return request('/user/info2', { prefix:'/mock', method: 'GET', }); } 登录接口数据 {'code': 200, 'data'.
antd-pro-vue pro-layout怎么修改面包屑
weixin_43558117的博客
04-28 1222
antd vue pro-layout 面包屑使用
umi＋react＋antdesign pro 实现动态路由和动态菜单（权限管理）
gaoxiaofei520sss的博客
05-25 5315
在这可以直接读取，但是有一个问题 当用户改变时，不能即使返回最新的菜单数据。2、但是所需要的数据就很多了，例如当前菜单是否隐藏，侧边栏不显示等等这些属性。按钮权限可以通过每一个页面权限的子集，来获取某些个字段，通过这些字段的鉴别，来对应的显示/隐藏不同的按钮（按钮权限）在这，你可以拿取跳转的当前路由和你获取的动态菜单做匹配，若从在。1、服务器返回的数据尽可能可前端所需要的数据保持一致，且结构一致。3、动态菜单通过对数据操作，可形成动态路由。1、想要做动态路由，可以通过服务器获取动态菜单的数据来做。
ant design pro v5 - 03 动态菜单 动态路由（配置路由 动态登录路由 登录菜单）
haiyabtx
10-17 7749
React + TypeScript + Ant Design Pro V5.2 开箱即用的中台前端/设计解决方案。动态菜单 动态路由 （配置路由+动态登录路由）
ant design pro + umi4的动态菜单与动态路由
猜测
04-07 4333
参考：https://blog.csdn.net/weixin_43294560/article/details/107447241。之后还将子路由routes为[]时，把父结点也清除的数据处理，以及使用patchClientRoutes来修改默认路由跳转，而原本routes.ts配置的路转就可以删除了。先说说我浪费了大量时间使用的处理方式：因为曾经的项目是umi3的，所以我就想原样搬过来，结果发现，布局页BasicLayout的子children不见了！
ant design pro动态菜单
10-08
自己写的ant design pro动态菜单，不足请指正，互相学习借鉴！
ant design pro新版本动态菜单
12-26
基于12月版本的ant design pro开源项目的动态菜单生成的完整方法附代码，粘贴就可使用，简单方便。内含解说。直接能用，本人亲测，非诚勿扰！！！
Umi4 从零开始实现动态路由、动态菜单
热门推荐
绿胡子大叔的博客
10-04 1万+
近期在写 Umi4 的练习项目，计划实现一个从服务器获取路由信息并动态生成前端路由和导航菜单的功能。本文记录了相关知识、思路以及开发过程中踩到的坑。
ant design pro v5 动态路由
m0_46872814的博客
03-22 3821
ant design pro v5 动态路由ant design pro v5 动态路由1.添加模拟数据2.添加request请求2.修改app.tsx文件4.app.tsx 完整代码 ant design pro v5 动态路由 1.添加模拟数据 mock/menu.ts export default { '/api/getMenuList': { routes: [ { path: '/user', layout: false, r
ant design pro 动态路由 menuDataRender 
lvzhyt的专栏
09-21 5186
ant design pro 动态路由 menuDataRender 菜单 菜单根据config.ts生成。 如果你的项目并不需要菜单，你可以在src/layouts/BasicLayout.tsx中设置menuRender={false}。 从服务器请求菜单 你可以在src/layouts/BasicLayout.tsx中修改menuDataRender，并在代码中发起 http 请求，只需服务器返回下面格式的 json 即可。 menuDataRender 传入...
Ant design pro v4-服务器菜单和路由权限控制
04-22 1218
要解决的问题：ant design pro默认情况下，菜单和路由都用配置的方式，在前端的config/config.ts中配置。但是大多数后台系统都需要由后端服务器控制权限。类似的需求一般包括两点：1、“只看该看的，防君子”：不同角色对应不同菜单，在用户登录时，由服务器根据登录用户的角色生成菜单；有权限的菜单显示，没权限的菜单隐藏。2、“想看也不行，防小人”：防止用户直接通过在浏览器中输入未授权菜...
umi 4 中配置动态路由
Web-BUG记录坎坷路
07-12 4974
在app.tsx中添加钩子函数，定义变量用来存储记录在render中请求的结果。// 找到'/'根路由下的routes信息 const routerIndex = routes . findIndex((item : RouteItem) => item . path === '/') const parentId = routes [ routerIndex ] . id } // ...
Ant Design pro v4服务菜单显示Icon
05-22 806
前段时间写了几篇ant design pro v4服务器控制菜单和路由的文章。有小伙伴说按照文章的方法菜单是拉取下来了。但是，跟使用config.ts控制菜单相比，服务器下发的菜单没有显示菜单图标（Icon）。于是，又花了一点时间解决icon显示的问题，这里来跟大家分享。我们在这篇文章的基础上进行修改，如有需要请参考下面链接查看：玩乐儿童编程：Ant design pro v4-服务器菜单和路由权...
android手机应用源码Imsdroid语音视频通话源码.rar
最新发布
05-20
android手机应用源码Imsdroid语音视频通话源码.rar
antdpro设置动态菜单
09-19
总结起来，通过配置菜单数据，使用Ant Design Pro提供的组件来渲染菜单，再根据用户权限或其他条件动态生成菜单项，就可以实现antdpro设置动态菜单的功能。 ### 回答3： 在antdpro中设置动态菜单需要以下步骤： 1...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值