1.分析后台组成
后台基本组成是由菜单、头部、内容区域组成
2 后台具体实现
2.1 整体页面布局
页面整体布局为侧边栏(CommonAside)、头部(CommonHeader)、标签区域(CommonTag)、内容区域(Content)四部分组成,展开和收起功能是把展开和收起的状态,用一个变量值,存在全局的store里面,可以通过useSelector来实时获取当前状态,通过点击展开和收起按钮就触发diapatch提交相应的reducer进行修改值
注意: 如果Content不包含Outlet子路由会无法渲染
2.1.1 主页面的实现:
代码具体实现:
2.1.2 登录页面的实现
如果有token,就直接到首页,没有token,就去登录页
代码具体实现:
2.1.3 tab标签栏的实现
- 获取当前已经打开的tab列表,进行遍历
- 获取当前激活的tab,用于高亮展示
- 如果新增tab,则往tab列表新增一条数据,且高亮展示
- 如果删除一个tab,判断是否是最后一个,如果是最后一个,高亮往前移动,如果不是最后一个,高亮往后移动,首页不可删除
- 如果进行tab切换,则重新设置高亮,和路由跳转
2.2 运行效果