效果图
一.默认设置是顶部导航
二.修改src/layouts/BasicLayout.js
1. 把topmenu改为sidemenu,这样侧边栏就可以同时展示出来了
2. 在layout的外层加多一层Layout标签,然后把Header组件放到Layout最外层,这样基本布局已经完成
三. 去掉顶部导航悬浮时出现的二三级菜单
1. 在TopNavHeader文件下创建TopMenu.js
2. 把SiderMenu/BaseMenu.js的代码全部拷贝到TopMenu.js![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/10cd7cc0b7c3955171d7cc97973ebca0.png)
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)
}
})