前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >后台tab页接入微应用的问题

后台tab页接入微应用的问题

作者头像
copy_left
发布2020-10-26 10:57:04
1.1K0
发布2020-10-26 10:57:04
举报
文章被收录于专栏:方球

记录在旧后台系统中嵌入微应用时,遇到的关于 tab 标签页及组件缓存的问题

页面结构

这里主要功能页都将通过 main.vue 组件渲染到右侧容器中, 左侧为主菜单。每一子页被激活后,将新增tab标签。tab 标签之间切换将不更新组件内容。

原来组件渲染结构

这里iframe未被使用,所以关注点在两个路由的渲染入口, 1. tab页内容入口 2. 其他子页内容入口. 多 keep-alive 与 router-view 我们知道 keep-alive 用于维持组件状态,router-view 将作为路由匹配后的组件渲染出口. 这里将 keep-alive 和 router-view 嵌套在 tab中,将生成多组渲染出口. 如果只是从单纯渲染的角度,单一的出口既可以满足。 但单一出口的问题在于, keep-alive 对于组件缓存的处理。 实际测试会发现,单一出口时,路由切换, tab标签关闭后新增,都将维持组件的状态。 这就和我们的预期有出入了, 我们期望关闭tab标签关闭后,组件状态也被重置。这里就和keep-alive的缓存机制有关,keep-alive 将缓存包裹内的组件实例,当下次渲染时,重复使用该实例。所以keep-alive 内的组件重复渲染时,不会触发组件内的created钩子。 而多 keep-alive , router-view 为每一tab标签独立分配组件缓存, 当该标签移除时,keep-alive也将被移除,所以组件缓存也将清除。 下次新增标签将为全新组件。

微应用引入

问题1: 原 main.vue 主容器与 mou路由 '/' 绑定,如何触发微应用加载 ?

为了尽量兼容原组件加载方式,这里微应用的加载触发,选择沿用原触发方式,只在配置已经渲染出口时做差异化处理. 这里只做简单流程梳理 路由注册以及触发流程

菜单UI加载及触发.png

微应用渲染入口

这里微应用的加载,都通过手动控制,将周期钩子与微应用容器组件关联在一起 主容器入口

微应用容器

问题2: 如何渲染微应用且保持微应用状态 ? 微应用状态保持,需要基座与微应配合。 保证微应用容器在使用中不会被注销, 这里利用与原路由出口一致的设置方式

微应用内配置keep-alive

这里子应用作为微应用时将设置统一的路由前缀,类似主应用的嵌套路由组件

总结

对于这类tab标签页引入微应用的情况, 主要的问题是: 主次应用路由嵌套关系 子应用指定渲染容器 子应用的生命周期控制 子应用与原组件的兼容协同

一个简单直接的办法,可以将子应用看作一类在线动态路由组件。 而这类组件的声明周期是关注的重点.

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 页面结构
  • 原来组件渲染结构
  • 微应用引入
    • 问题1: 原 main.vue 主容器与 mou路由 '/' 绑定,如何触发微应用加载 ?
    • 总结
    相关产品与服务
    容器服务
    腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档