需求:实现系统页面的多标签渲染及切换,方便用户查看不同页面的信息。
实现:在布局组件basicLayout中加入新组件:tab组件,并存储tab页相关数据。
1,记录当前的路由信息,至少要有 页面名:title,页面路由:path,页面参数:query,同时添加到tabData中,将tab组件的activeKey置为页面路由path。
2,在切换菜单栏时,由于activeKey为path,对应的tab会高亮。如果没有该条路由数据,将此路由信息加入tabData中。
3,在切换tab页时,由于activeKey为path,对应的tab会高亮。
4,在切换tab页时,当之前页面为详情页等非首页页面,再次进入需要依旧展示详情页,所以需要判断action,从而对该条数据进行重新赋值,故加了页面参数query属性。
5,在删除tab页时,始终保持最后一个tab页不能被删除。当高亮为最后一个tab并关闭时,高亮移到前一个tab;除此之外,当前高亮关闭,高亮移到下一个tab。
注意:1,在点击tab切换页面时,要保证菜单区域对应的高亮是正确的。
2,大屏页面暂不考虑多标签展示。
3,children组件不能加入tabData缓存起来,因为路由切换时,当前页面组件实例就会被销毁,再次进入时依旧会刷新。 且children为元素数据,存储后 不能重新拿出来渲染。
4,需要将关闭后的页面缓存起来,ice自带有keep-alive,但它缓存后无法销毁,且有隐藏页面接口多次请求问题。为了满足业务需求,引入react-activation,在关闭某标签页时,将其缓存的页面组件销毁。
缓存的cachingNodes:传入name下的children被缓存。当再次传入name时,会把之前的children显示出来;当关闭销毁时,传入对应的name值(这里是pathname)即可把对应缓存的children销毁,再次进入就会重新刷新页面。
5,由于basicLayout在不同模块下会重复渲染,导致切换时tabData数据会变成空,所以tabData放在公共存储中。若后续有刷新页面依旧需要tabData,可改为sessionStorage存储。
6,在测试时发现首页带参数action=edit,tab切换时要点击两次,因为该页面内写法的原因存储了两次数据。所以大屏设置等个别页面需调整,首页的参数需置空。