qiankun多页签：开启keepAlive后，解决同一路由打开多个tab页数据一样问题

已于 2023-04-21 11:06:12 修改
阅读量971 收藏
点赞数
文章标签： 乾坤多页签
于 2023-04-20 19:08:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45439379/article/details/130273494
版权

qiankun多页签：开启keepAlive后，解决同一路由打开多个tab页数据一样问题

文章目录

前言

<keep-alive :key="$route.fullPath" :include="keepAlive">
      <router-view />
    </keep-alive>

<keep-alive :include="keepAlive">
      <router-view :key="keepAliveKey" />
    </keep-alive>

参考：
多页签打开同一个路由（query或者params参数不一样）保活数据导致页面显示一样的问题

weixin_45439379
关注
基于微前端qiankun的多页签缓存方案实践
JavaMonsterr的博客
07-31 1529
相较于社区上大部分通过方案一进行实现，本文提供了另一种实现多页签缓存的一种思路，主要是对子应用缓存处理上有些许的不同，大致的思路及通信的方式都是互通的。另外本文对qiankun框架的使用没有做太多的发散总结，官网和Github上已经有很多相关问题的总结和踩坑经验可供参考。httpshttpshttpshttpshttpshttps。...
同一页面多个Tab选项卡嵌套显示实例
05-16
内容索引:脚本资源,Ajax/JavaScript,Tab,选项卡,滑动门　一个可以支持在同一页面上嵌套显示多个选项卡的一个实例，最多可以嵌套三级，选项卡内部还可以显示选项卡，虽说很多情况下我们不这么用，但是却对了解CSS及...
【qiankun vue3.0 保持组件状态 keep-alive 的使用】
qq_37252401的博客
08-24 1780
前段时间在做项目迁移，原来项目架构用的Vue3+TS+Vite，迁移到qiankun项目中，一切都算顺利，但是再后面考虑到因为是后端数据管理平台，所以用户可能同时打开多个标签进行对比数据，会涉及到缓存问题，经过一番折腾终于搞定了现在做下总结。2.参考keep-alive实现方式，每个子应用都缓存自己实例的vnode，下次进入子应用时可以直接使用缓存的vnode直接渲染为真实DOM。控制不同子应用dom的显示隐藏。这里的子应用都配置在主应用的二，三级路由下，构造出的结构相似多级嵌套的父子路由关系。
Vue路由：开启keepAlive后，解决同一路由打开多个tab页数据一样问题
一方湖泊
09-28 2449
绑定key，对象类型设置成多例即可。
[qiankun]-多页签缓存
前端
02-22 2456
[qiankun]-多页签缓存环境功能需求多页签缓存方案方案1.主服务进行html替换方案2.微服务vnode 替换方案3.每个微服务都不卸载微服务加载方式的选择微服务的路由路径选择微服务的缓存工具微服务的容器使用tab作为微服务的挂载容器使用微服务路由作为微服务的挂载容器场景描述微服务的缓存缓存微服务删除微服务不同路由同一微服务情况 管理系统比较常用的一个功能就时多页签的缓存，我们通过缓存已经打开的页签，并在切换页签的时候看到之前的查询结果，在关闭页签的重新点击菜单那时，看到的是新的没有查询记录界面 环境
qiankun应用级缓存-多页签缓存
qq_38935512的博客
04-23 3592
应用间切换需要保存页面缓存（多页签缓存），通过vue keep-alive只能实现页面级缓存，在单独打开的应用里能实现缓存，但是子应用切换到主应用，那子应用的缓存失效。第一种qiankun自动检测路有的变化来控制子应用的卸载和加载，我们无法监听到，也就无法去替换vnode，所以采用第二种，手动加载应用（通过路由的变化去监听下就行了）采用子应用切换时，将子应用作为一个vue实例，再次加载时使用保存的实例上的vnode替换vue实例化的时候的render函数。这里要区分是否是首次进入。
qiankun-example::rocket: qiankun实战demo，父应用vue，子应用用react和vue
05-08
qiankun提供了一种在单一浏览器窗口内运行多个独立的应用（子应用）的能力，这些子应用可以拥有各自的路由、状态管理以及生命周期，而主应用则负责全局的路由管理和状态共享。这种架构模式使得不同技术栈的应用间能...
qiankun（乾坤）:package::rocket:快速，简单，完整的微前端解决方案-javascript
06-21
Qiankun，源自中国古代的哲学概念，寓意“天地万物”，在软件开发领域中，它是一个轻量级、易用且全面的微前端解决方案。该框架的目标是帮助开发者构建大型单页应用（SPA），通过将多个独立的应用（子应用）聚合到一...
qiankun-vue:分享一套qiankun开发vue微应用的场景解决方案
05-08
分享此demo仅便于学习和解决项目开发上的问题，demo只使用了VUE框架。项目统一使用最外层pagekage.json安装插件来实现项目一致性，遇到特定第三方插件单独在项目pagekage.json配置。项目主要采用history + [hash || ...
有keepalive的两个页面使用新版monaco导致重复的自定义提示
weixin_60454266的博客
05-25 801
在Monaco编辑器实例化时，可以设置一个唯一的标识符，然后在自定义提示回调中进行判断，只对当前编辑器实例进行处理，避免多个编辑器实例触发重复提示。这个问题可能是由于页面中有多个Monaco编辑器实例，每个实例都会触发自定义提示，导致重复出现。在页面加载时，只初始化一个Monaco编辑器实例，其他编辑器实例可以在需要时动态创建和销毁。需要注意的是，在新版的Monaco中，使用。方法获取资源的方式已经被废弃，需要使用。属性来获取资源的标识符。
qiankun子应用不停重复加载问题
weixin_43589827的博客
05-20 3373
qiankun子应用不停重复加载问题 如图所示，接入微应用后，控制台不停的在应用生命周期中打印 before load。一开始还以为是路由问题，后来发现是其他开发人员少加了qiankun中configureWebpack的配置： 最后补充上去就解决了子应用重复加载的问题。 其实这个配置，我在每个应用中都有加，所以在查找问题的时候，都以为已经加上了，但后面发现被其他人代码覆盖了，导致配置没有，太坑了。 ...
【qiankun多页签缓存从0到上线踩坑实录】
qq_40921328的博客
10-12 2416
qiankun多页签缓存方案实现
Vue keep-alive,同一个路由组件参数不同，如何分别缓存状态
lllomh的博客
11-02 4535
在实际开发中.会有这样的需求，从列表点击到详情，缓存数据。详情返回列表则保持滚动条位置，并且不再请求列表api！正常情况下 直接 加上<keep-alive> 即可，但是如果列表本身是带有参数的，那就不行了。一下为参数变化的实现方式！ demo请狠狠的戳这里https://download.lllomh.com/cliect/#/product/FA28111110405059 一：一样的是 在 路由表设置好标记 const routes = [ { path: '/...
vue+qiankun -- 多tab标签页切换缓存
m0_59930878的博客
04-09 1029
组件开启keep-alive，由于keep-alive只能支持二级及以下路由，对于三级及以上路由，keep-alive失效，所以需要对keep-alive重新封装，并且在qiankun提供的生命周期钩子update里调用子应用删除缓存的方法 用于清除子应用组件keep-alive缓存。删除tab时是子应用并且在tablist中是否还有子应用菜单，如果没有，则unmount方法卸载子应用，如果有子应用菜单，则执行update方法清除该子应用的组件缓存。主子应用都使用vue，路由统一使用history模式。
（Vue-ElementUI）Tab、Menu联动，点击使用同一组件生成新窗口，路由刷新问题
小刘的博客
09-26 1981
Tab、Menu联动，使用一个文件生成多个内容相同tab名不同的view
qiankun实现子应用tab页签切换缓存页面
青春正在燃烧的博客
07-05 1149
qiankun实现tab页面切换缓存页面
Vue3多路由指向同一组件 实现keep-alive缓存页面的解决方案
u013553807的博客
01-05 1725
需求：十几个路由使用的组件是同一个，从一个页面到另一个页面或者其他页面的时候，让之前输入的数据还存在。
Vben Admin 动态路由在标签页（Tab）上只能单个打开
weixin_48315912的博客
05-09 559
在 Vben Admin 中，如果你希望某个动态路由在标签页（Tab）上只能单个打开，不允许同时打开多个相同路由的标签页，你可以利用 Vben Admin 提供的动态路由标签页自动关闭功能。通过以上步骤，你应该能够实现在 Vben Admin 中对特定动态路由的标签页进行限制，保证只能打开单个标签页。它应该是一个不包含动态片段的路径字符串，Vben Admin 使用它来识别和合并相同的动态路由标签页。如果你的项目中有特定的路由守卫或逻辑需要处理，确保它们与动态路由标签页自动关闭功能兼容。
qiankun微前端配置多个activeRule
最新发布
09-25
Qiankun 微前端是一种基于组件化思想的单页面应用架构，它允许你在单一的根应用程序中管理多个独立的功能模块（也称为子应用）。在配置多个 `activeRule` 的时候，`activeRule` 主要用于路由懒加载和动态切换功能，它通常与 Vue Router 或者类似的路由库一起使用。 每个 `activeRule` 是一个匹配规则，当对应的 URL 匹配到这个规则时，对应的应用会被激活并渲染。例如： ```json [ { path: '/module-a', component: 'ModuleA', activeRule: { // 模块 A 的匹配条件，可以是路径、URL 查询参数等 path: '^/module-a' } }, { path: '/module-b', component: 'ModuleB', activeRule: { path: '^/module-b' } } ] ``` 在这个例子中，当你访问 `/module-a` 或其子路径时，`ModuleA` 将被激活；同样，访问 `/module-b` 或其子路径时，`ModuleB` 将显示。如果你需要根据用户的登录状态或者其他条件动态选择激活哪一个模块，可以在 `activeRule` 中添加相应的判断逻辑，如通过 `params` 或者 `meta`.
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值