首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

后台tab接入微应用的问题

记录在旧后台系统中嵌入微应用时,遇到的关于 tab 标签及组件缓存的问题 页面结构 ? ? 这里主要功能都将通过 main.vue 组件渲染到右侧容器中, 左侧为主菜单。...每一子被激活后,将新增tab标签。tab 标签之间切换将不更新组件内容。 原来组件渲染结构 ? 这里iframe未被使用,所以关注点在两个路由的渲染入口, 1. tab内容入口 2....其他子内容入口. 多 keep-alive 与 router-view 我们知道 keep-alive 用于维持组件状态,router-view 将作为路由匹配后的组件渲染出口....实际测试会发现,单一出口时,路由切换, tab标签关闭后新增,都将维持组件的状态。 这就和我们的预期有出入了, 我们期望关闭tab标签关闭后,组件状态也被重置。...这里子应用作为微应用时将设置统一的路由前缀,类似主应用的嵌套路由组件 总结 对于这类tab标签引入微应用的情况, 主要的问题是: 主次应用路由嵌套关系 子应用指定渲染容器 子应用的生命周期控制

1K41

React 中后台系统多实现

社区多需求 Issues 偏右大佬早在 2017 年对此做出了回应,详见“能否提供tab切换模式 · Issue #220 · ant-design/ant-design-pro · GitHub”...首先说 “tab 模式无法(不适合)进行 url 的分享”其实是不成立的, url 带路由和参数就能准确跳转到对应页面,这在我们系统和 Vue 的多系统里都是基本功能;而说浏览器本身有 tabs 就不需要做到网站内部...,也比较片面,SPA 的页面不开浏览器 tab 应该更符合 Antd 的设计价值观:足不出户 - Ant Design,就连最新版的 Chrome 都已经支持“群组”功能了,让用户在 SPA 页面尽量不开浏览器才应该是更好的体验设计...解决了 react-router-cache-route 在 React 15 版本报错问题之后,接下来的工作就是实现的 UI 和打开关闭的逻辑了,注意关闭需要调用 react-router-cache-route...,自动新增、关闭标签等功能) Antd Pro Page Tabs ( 54 star,Ant Design Pro 多,基于 UmiJS ) alita/packages/tabs-layout(

3K20
领券