乾坤：微应用非首次加载，需刷新才会重新加载

已于 2023-02-22 11:05:13 修改
阅读量1.6k 收藏 4
点赞数 3
分类专栏： 随记 文章标签： javascript 前端 vue.js
于 2023-02-21 14:36:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ssssummer/article/details/129142079
版权

乾坤：微应用非首次加载，需刷新才会重新加载

问题描述：
主应用通过路由首次访问某个微应用，此时微应用正常加载；重新切回主应用自己的某个页面，再次加载这个微应用，页面显示空白，也没有报错，刷新页面才能重新加载
技术栈： 主子应用都是使用的vue3.0 + vite + ts
解决方法：
在微应用main.ts中render 方法中创建应用实例，就能解决这个问题
在这里插入图片描述

解决阿里qiankun微应用资源无法加载
洲上牧童
07-05 3473
公司老项目多了，却想用新版本的框架，最好的解决办法就是用微前端。本文说下我们在用阿里微前端框架qiankun，遇到的一些问题，以及一些巧妙的解决办法。
qiankun微应用之间、主微应用之间相互跳转方式总结与实践
热门推荐
qq_41885295的博客
07-31 2万+
qiankun 主子应用、子应用间跳转方案
vue qiankun 主应用访问子应用 不显示也不报错
风间琉璃c
01-12 1万+
业务背景：原内管平台中子系统越来越多，项目越来越大，打包发布需要十几分钟，本地运行npm run dev都非常容易因为内存不够导致崩溃（虚拟桌面内存就8G），业务打算将渠道管理平台中的一个子系统独立出来，用qiankun改成微前端架构。 介绍 - qiankunhttps://qiankun.umijs.org/zh/guide 遇到的问题：从主应用访问子应用时，控制台不报错，但是页面显示空白。 之前在测试demo中成功搭建过一次，由于过了两周印象不是很深刻，打算再重新搭建一次demo，主应用和子应用
qiankun子应用不停重复加载问题
weixin_43589827的博客
05-20 3744
qiankun子应用不停重复加载问题 如图所示，接入微应用后，控制台不停的在应用生命周期中打印 before load。一开始还以为是路由问题，后来发现是其他开发人员少加了qiankun中configureWebpack的配置： 最后补充上去就解决了子应用重复加载的问题。 其实这个配置，我在每个应用中都有加，所以在查找问题的时候，都以为已经加上了，但后面发现被其他人代码覆盖了，导致配置没有，太坑了。 ...
qiankun微前端中主应用路由页面加载微应用的某个路由页面_qiankun 主应用跳转子应用其他路由(1)
2401_84438067的博客
05-08 565
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】给大家分享一些关于HTML的面试题。},]);3. 在这个路由组件的 ngAfterViewInit 周期调用 start 函数，注意不要重复调用。if (!start();#### qiankun在vue框架下`history 和hash`路由模式的使用!
vue—qiankun微应用中antd样式问题解决方案
qq_42345136的博客
07-07 3205
vue-基于qiankun的微前端中antd样式问题解决方案
qiankun vue作为子应用出现 created 触发两次的情况！
weixin_43801428的博客
07-18 1812
qiankun vue作为子应用出现created触发两次的情况！
用微前端 qiankun 接入十几个子应用后，我遇到了这些问题
LuckyWinty的博客
12-18 2653
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群简单了解微前端微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。微前端具备以下特点：技术栈无关：主框架不限制接入应用的技术栈，子应用具备完全自主权独立开发、独立部署：既可以组合在一起运行，也可以单独运行。增量升级：在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微...
页面第一次数据不出来，刷新一次数据才会出来
ym_wang的博客
07-03 8462
    使用<c : for Each>显示数据时，页面第一次数据不出来，刷新一次数据才会出来。【这跟逻辑有关，，如果你是在本页面获取的数据，，又想在本页面显示就会出现你说的这个问题，，，解决办法1：在获取数据之后，在代码加重载函数，也就是window.reload()解决办法2：获取数据，将数据放入session，，重定向到显示数据页面，即可正常显示】...
css-in-js在qiankun微前端切换丢失样式问题（styled-components/emotion）
幻日のヨハネ
01-23 7209
背景 开门见山，我们在解该问题前先做一个 css in js 插入 style 标签的前提介绍： 方案 说明 快速方案A 目前使用现代 css style sheet 也就是 cssom 的 api 去操作样式是性能最好的，会把一堆 css 放到一个 <style></style> 标签里，这种方案速度很快，支持万级别的样式插入 慢速方案B 而早期是一个 style 标签对应插入一个样式，这样会比较慢，但是他在开发环境会很方便于修改和调试 问题 问题是什么呢？
qiankunjs—子应用无限刷新（一）
最新发布
qq_18840283的博客
08-19 528
qiankun主应用与子应用sockjs通信的问题
乾坤实战 采坑之旅（主应用的某个路由页面加载微应用）
dongheng123的博客
12-19 2502
qiankun 主应用的某个路由页面加载微应用
微前端--qiankun(3)
m0_73280507的博客
07-24 1218
当微应用信息注册完之后，一旦浏览器url发生变化，便会自动触发qiankun的匹配逻辑，所有的activeRule规则规则上的微应用就会加载到指定的container上，同时依次调用微应用暴露出来的钩子。创建一个隔离的dom子树，其中的样式和脚本不会影响外部的dom，通过再元素上应用shadow dom,可以将样式限定再shadow dom内部，实现样式的沙箱化。,vue会自动将改样式应用于当前组件的元素，并在编译的过程中为css规则添加要给唯一的属性选择器。单实例场景下的子应用和主应用的样式隔离。
vue-router页面多开，同页面不同参数跳转页面不刷新解决方法
weixin_43111269的博客
08-10 1072
vue-router页面多开，同页面不同参数跳转页面不刷新
qiankun实现子应用tab页签切换缓存页面
青春正在燃烧的博客
07-05 1668
qiankun实现tab页面切换缓存页面
使用react路由，页面需要刷新才能渲染组件内容
weixin_43825632的博客
05-04 1178
可能的情况一： index.js开启了严格模式，将严格模式关闭即可解决 可能的情况二： 整个项目中使用了多次BrowserRouter标签，删除其中一个就行。 在App.js中使用了BrowserRouter 在index.js中也使用了BrowserRouter，删掉其中一个 ...
qiankun踩坑
qq_38657283的博客
03-25 556
2.app 2.0 采用loadMicroApp手动加载各应用，多应用保持也可以，但是也遇到个问题，打开A应用a页面，再打开A应用b页面，关掉a页面，再打开a页面，a页面不会重新加载，还是第一次打开时的状态。1.app1.0采用registerMicroApps实现了，但是遇到个问题，不能多应用保持，打开A应用a页面，再打开B应用b页面，再切换成a页面，a会重新加载，不能保持。公司要求拆分系统，做成微应用。
页面跳转样式错位刷新又好了的情况
rookie_0_0的博客
05-18 1686
页面跳转样式错位，刷新又好了？？？ 一、问题： 从一个页面返回到另外一个页面，样式出现了错位，但是刷新一下就好了。 二、原因： 在跳转时页面的样式并没有加载，而是保留了前面一个样式，或者前面已经加载过页面的样式，样式的id 或者 class 冲突了，也就是说很多页面都用到了相同的class和id属性，是一样的样式，再次跳转便不会进行变化。 三、解决方法： 1、在起名的时候注意一下，都给一个class，那么就可以最大程度避免属性相同问题。 2、在css里面进行scoped穿透，这样就会锁定到当前组件的样式，不
qiankun微前端 集成jquery项目 导致页面 再次点击不再触发js
dongheng123的博客
03-15 586
问题是第一次加载之后 第二次进来不再加载执行js所以应该再 entry 这个页面执行js 通过jquery这个方法 重新导入所需的js资源 以及在这里把默认需要执行的js执行一次
乾坤：阿里巴巴UMI的Micro Frontends实现
single-spa定义了一系列的生命周期方法，允许微应用能够在合适的时间加载和卸载，而不会相互干扰。乾坤框架就是基于single-spa理念之上，对微前端的实现进行了进一步的封装和简化。 4. qiankun的特性： - 以single-...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值