把antd pro后台管理系统项目的两种导航模式融合一起

最新推荐文章于 2025-03-05 19:31:48 发布

C7~马景文

最新推荐文章于 2025-03-05 19:31:48 发布

阅读量5.3k

点赞数 3

分类专栏： antd pro

本文链接：https://blog.youkuaiyun.com/weixin_42222874/article/details/90449828

版权

antd pro 专栏收录该内容

2 篇文章

订阅专栏

效果图

在这里插入图片描述

一.默认设置是顶部导航

在这里插入图片描述

二.修改src/layouts/BasicLayout.js

在这里插入图片描述

1. 把topmenu改为sidemenu，这样侧边栏就可以同时展示出来了

2. 在layout的外层加多一层Layout标签，然后把Header组件放到Layout最外层，这样基本布局已经完成

三. 去掉顶部导航悬浮时出现的二三级菜单

1. 在TopNavHeader文件下创建TopMenu.js

在这里插入图片描述

2. 把SiderMenu/BaseMenu.js的代码全部拷贝到TopMenu.js

3。把TopMenu.js内部getSubMenuOrItem函数的一段代码注释，此处是二三级菜单

在这里插入图片描述

4.在TopNavHeader/index.js中去掉BaseMenu，引入TopMenu

在这里插入图片描述

四. 逻辑处理

1.根据路由pathname，显示顶部导航对应的侧边栏侧边栏

BaseMenu.js添加的代码

		let pathArr = pathname.split('/');
		let path = '/'+pathArr[0]+pathArr[1];
		console.log(path);
		const menuData1 = [];
    menuData.map(item =>{
    	if(item.path == path){
    		item.hideInMenu = false
    		menuData1.push(item)
    	}else{
    		item.hideInMenu = true
    		menuData1.push(item)
    	}
    	
    })

在这里插入图片描述