vue3.0 + qiankun遇到的问题

进入子应用再回到主应用切换动态路由时
TypeError: Cannot read properties of undefined (reading ‘appWrapperGetter’)
application ‘plat’ died in status UNMOUNTING: instance.$destroy is not a function

第一个报错是因为子应用切走时没有销毁 vue的实例,在qiankun的 unmount 生命周期中,销毁 vue的实例即可!
这就引出了第二个报错,这个意思是实例中 没有 d e s t r o y 方法, destroy方法, destroy方法,destroy是vue2.0中销毁实例的方法,在vue3.0中,销毁实例用 unmount方法。代码是:

/** 正确写法 */
let instance = null;
function render(props = {}) {const { container } = props;instance = createApp(App); // 这样才是创建了vue实例,此后才是往vue实例上挂载三方插件instance.use(router).use(store).mount(container ? container.querySelector("#app") : "#app");
}
export async function unmount(props) {instance.unmount(); // 销毁实例 vue3命名为unmounted vue2命名为destroyed
}

理论上上面的代码按说是可以的,但是如果我们qiankun的基座是vue2.0,在这里其实还是会报错,这里拿到的instance打印发现是这样的:
在这里插入图片描述
正确的写法是这样:

let instance: any = null;
function render (props: any = {}) {const { container } = props;instance = createApp(App);instance.use(store).use(router).use(ElementPlus, { locale: zhCn }).mount(container ? container.querySelector('#app') : '#app');console.log(instance);
}
export async function bootstrap () {// console.log('[vue] vue app bootstraped');
}
export async function mount (props: any) {render(props);
}
export async function unmount () {if (instance) {instance.unmount();instance = null;}
}

打印是这个:
在这里插入图片描述
到这里问题就算解决了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/160565.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

常用RFC规范汇总

官网:https://www.rfc-editor.org/ The RFC Series (ISSN 2070-1721) contains technical and organizational documents about the Internet, including the specifications and policy documents produced by five streams: the Internet Engineering Task Force …

TCP/IP

分层模型 TCP 传输控制协议 UDP 用户数据包协议 四层 应用层 负责发送/接收消息 传输层 负责拆分和组装 .期间会有编号 网络层 TCP/UDP 属于网络层, 不会判断和处理编号 数据链路层 以太网 ,网络设备 TCP 连接 TCP连接需要端口,进行通信 Java 通过Socket 接收消息 发送 …

基于SpringBoot+Vue的体检预约管理系统

基于SpringBootVue的体检预约管理系统的设计与实现~ 开发语言:Java数据库:MySQL技术:SpringBootMyBatisVue工具:IDEA/Ecilpse、Navicat、Maven 系统展示 主页 管理员界面 用户界面 摘要 体检预约管理系统是一种基于Spring Boot…

Vue3常用操作

一、Vue3项目构建 1、安装最新版本vue npm create vuelatest 2、选择需要的配置 3、进入项目 cd 项目名称 4、下载依赖 npm install 5、启动项目 npm run dev

chatGLM3微调

文章目录 一、问答数据集生成器使用设置问题启动使用产出效果 二、进行微调第一步:下载模型第二步:项目准备2.1 下载项目2.2 然后使用 pip 安装依赖2.3 开始 第三步进行微调3.1安装相关依赖3.2准备数据集,并且上传3.3对数据集进行预处理3.4 进…

如何使用技术SEO来优化评论

你在网上购买吗?我的意思是,在当今时代,谁不这样做?作为买家,无论您想购买什么,您都了解全面和高质量评论的价值。这是您在决定是否购买产品时考虑的重要因素。 这就是为什么许多人在网上购物之前使用评论…

移动端click事件、touch事件、tap事件的区别

在移动端,有三种常见的事件类型,click事件、touch事件、tap事件。它们的区别如下: click事件:click事件是在用户点击屏幕的时候触发,如果是移动设备,则会在用户点击屏幕的同时触发touch事件。但是&#xff…

【开源】基于Vue和SpringBoot的康复中心管理系统

项目编号: S 056 ,文末获取源码。 \color{red}{项目编号:S056,文末获取源码。} 项目编号:S056,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 普通用户模块2.2 护工模块2.3 管理员…

uni-app中vue3+setup实现下拉刷新、上拉加载更多效果

在小程序或各类app中,下拉刷新和上拉加载更多是极为常见和使用非常频繁的两个功能,通过对这两个功能的合理使用可以极大的方便用户进行操作。 合理的设计逻辑才能更容易挽留住用户,因为这些细节性的小功能点就变得极为重要起来。 那么在uni…

基于WEB的停车场管理系统的设计和实现【附源码】

基于WEB的停车场管理系统的设计和实现 摘 要 随着现代社会的快速发展,人民生活水平快速提高,汽车的数量飞速增加,与此同时停车问题也越来越受到人们的关注,为了实现对停车场进行有效的管理,结合一些停车场的模式和现状…

游戏被攻击了怎么办

随着网络技术和网络应用的发展,网络安全问题显得越来越重要,在创造一个和谐共赢的互联网生态环境的路途中总是会遇到各种各样的问题。最常见的当属于DDOS攻击(Distributed Denial of Service)即分布式阻断服务。由于容易实施、难以…

【LeetCode刷题】--40.组合总和II

40.组合总和II 本题详解&#xff1a;回溯算法 class Solution {public List<List<Integer>> combinationSum2(int[] candidates, int target) {int len candidates.length;List<List<Integer>> res new ArrayList<>();if (len 0) {return re…

深度学习之基于YoloV5车辆和行人目标检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介YOLOv5 简介YOLOv5 特点 车辆和行人目标检测系统 二、功能三、系统四. 总结 一项目简介 # 深度学习之基于 YOLOv5 车辆和行人目标检测系统介绍 深度学习在…

2023 年 亚太赛 APMCM 国际大学生数学建模挑战赛 |数学建模完整代码+建模过程全解全析

当大家面临着复杂的数学建模问题时&#xff0c;你是否曾经感到茫然无措&#xff1f;作为2022年美国大学生数学建模比赛的O奖得主&#xff0c;我为大家提供了一套优秀的解题思路&#xff0c;让你轻松应对各种难题。 cs数模团队在亚太赛 APMCM前为大家提供了许多资料的内容呀&…

【西行纪年番】孙悟空对战阴界王,素衣奄奄一息,巨灵拳霸气一击

Hello,小伙伴们&#xff0c;我是拾荒君。 《西行纪年番》第20集已更新。为了救回素衣&#xff0c;孙悟空想尽办法&#xff0c;最后他拜托沙悟净帮忙&#xff0c;终于成功把自己传送到阴界。原来&#xff0c;素衣的魂魄被阴界王藏在了他制造的人偶之中。沙悟净提醒孙悟空必须在…

8.2 Windows驱动开发:内核解锁与强删文件

在某些时候我们的系统中会出现一些无法被正常删除的文件&#xff0c;如果想要强制删除则需要在驱动层面对其进行解锁后才可删掉&#xff0c;而所谓的解锁其实就是释放掉文件描述符&#xff08;句柄表&#xff09;占用&#xff0c;文件解锁的核心原理是通过调用ObSetHandleAttri…

Axios使用方式

ajax是JQUERY封装的XMLHttprequest用来发送http请求 Axios简单点说它就是一个js库,支持ajax请求,发送axios请求功能更加丰富,丰富在哪不知道 1.npm使用方式 vue项目中 npm install axios 2.cdn方式 <script src"https://unpkg.com/axios/dist/axios.min.js">…

【三维几何学习】自制简单的网格可视化软件 — Mesh Visualization

自制简单的网格可视化软件 — Mesh Visualization 引言一、整体框架1.1 三角形网格1.2 界面管理1.3 VTK可视化界面 二、核心源码2.1 三角形网格&#xff1a;TriMesh类2.2 界面Widget_Mesh_Manager2.3 VTK可视化2.4 main 引言 使用PyQt自制简单的网格可视化软件 - 视频展示 本是…

Node.js入门指南(一)

目录 Node.js入门 什么是Node.js Node.js的作用 Node.js安装 Node.js编码注意事项 Buffer(缓冲器&#xff09; 定义 使用 fs模块 概念 文件写入 文件读取 文件移动与重命名 文件删除 文件夹操作 查看资源状态 路径问题 path模块 Node.js入门 什么是Node.js …

2023最新面试题

第一家 自我介绍介绍一下最近一个&#xff08;最熟悉的一个&#xff09;项目 项目几个人在负责 项目实际在用了吗&#xff0c;哪个平台在用啊&#xff08;在哪里上线&#xff09; 你认为你自己做的项目里面哪个比较难做呢&#xff0c;项目里面有什么难点&#xff1f;常用的是V…