在平常的后台系统开发中,常常需要缓存一些之前打开的页面,方便操作,多页签就是用来管理页面的,如下图
Umi4.0版本发布到现在已经有一段时间,全新的框架当然需要学习一下新的特性和功能,由于Umi4.0使用了react-router6
,所以路由有较大改动,多页签设计也需要重新调整。
文章分为三部分
1.设计思路
2.遇到的问题
3.扩展到自建路由
一、设计思路
之所以要设计多页签,是因为现有的框架路由只能单开,Vue里面即使有keep-alive,当面对类似/detail:id
这种路由时也只能同时存在一个。
多页签结构如下: 路由与组件一对一,组件与实例一对多,实例与页签一对一
以组件实例为维度构建页签,因此需劫持渲染。多页签之所以能劫持渲染是因为其就是一个高阶组件,监听路由变化生成对应的实例。自己维护当前展示的组件列表,从框架提供的全局路由信息生成对应的组件实例,向下渲染。从路由配置里面表现为所有的组件路由都是多页签路由的子路由。
{path: '/',//多页签对应的组件component: '@/layouts/MultiTagRoute.jsx',flatMenu: true,routes:[//以下是实际路由{name: '组件1',path: