vue3.0 + qiankun遇到的问题

news2024/10/5 20:29:01

进入子应用再回到主应用切换动态路由时
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.coloradmin.cn/o/1233627.html

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

相关文章

麒麟系统开机忘记密码,密码重置

开机后,麒麟系统忘密码了... ... 1.关机状态下,点击电源开机,进入GRUB界面(这个得看自己的系统进入GRUB的方式,有的直接进GRUB,有的直接进系统启动,我是按的F2进入GRUB界面)&#xf…

深度学习之自监督模型汇总

1.BERT: Pre-training of Deep Bidirectional Transformers for Language Understanding paper:https://arxiv.org/pdf/1810.04805v2.pdf code:GitHub - google-research/bert: TensorFlow code and pre-trained models for BERT Abstract:我们引入了一种名为 BE…

ECharts零基础使用思路 图表案例网站推荐

1、用npm安装echarts npm i echarts -S 2、引入 (1)可以在mian.js里全局引入 import echarts from ‘echarts’ Vue.prototype.$echarts echarts 将echarts挂载在Vue原型上 用时直接this.$echarts即可 (2)也可以在组件中按需引入…

OpenAI宫斗,尘埃落定,微软成最大赢家

周末被OpenAI董事会闹剧刷屏,ChatGPT之父Sam Altman前一天被踢出董事会,免职CEO,后一天重返OpenAI,目前结局未知。 很多同学想要围观,缺少背景知识,这里老章为大家简单介绍前因后果及涉及的人物,时间线,让大家轻松围观。 备好瓜子,开始。 1、主角 先看一张图,看一…

SWAT-MODFLOW耦合

耦合模型被应用到很多科学和工程领域来改善模型的性能、效率和结果,SWAT作为一个地表水模型可以较好的模拟主要的水文过程,包括地表径流、降水、蒸发、风速、温度、渗流、侧向径流等,但是对于地下水部分的模拟相对粗糙,考虑到SWAT…

解决收集问卷难的方法与策略:提升数据收集效率

随着社会的发展和科技的进步,问卷调查成为了获取信息和研究数据的重要手段之一。然而,面临的一个普遍难题是如何解决收集问卷困难的问题。无论是在学术研究、市场调研还是社会调查中,都存在着一些挑战和阻碍因素。本文将从不同角度探讨如何突…

手机 IOS 软件 IPA 签名下载安装详情图文教程

由于某些应用由于某些原因无法上架到 appStore 或者经过修改过的软件游戏等无法通过 appStore 安装,我们就可以使用签名的方式对相应软件的IPA文件进行签名然后安装到你的手机上 这里我们使用爱思助手进行签名安装,爱思助手支持两种方式,一种…

seleninum 基础及简单实践

网页自动化 1 Selenium自动化基础 1.1 Selenium简介 Selenium自动化流程如下: 自动化程序调用Selenium客户端库函数客户端库会发送Selenium命令,给浏览器的驱动程序浏览器驱动程序接收到命令后,驱动浏览器去执行命令浏览器执行命令浏览器驱…

基于单片机电梯液晶显示防超重,防气体报警、防夹报警控制系统及源程序

一、系统方案 1、本设计采用51单片机作为主控器。 2、液晶显示楼层。 3、防超重,防气体报警、防夹报警。 二、硬件设计 原理图如下: 三、单片机软件设计 1、首先是系统初始化 /lcd1602初始化设置*/ void init_1602() //lcd1602初始化设置 { write_co…

财报解读:第三季度营收净利双增,中通快递的进击根本停不下来?

快递业又变天了。 在极兔上市之前,快递行业的格局几乎已经稳定,“通达系们”占据了过半的市场份额。数据显示,2022年按包裹量计,中通、圆通、申通、韵达市占率分别为22.1%、15.81%、11.71%、15.92%,共计占比达65.54%。…

利用互斥锁解决缓存击穿问题

核心思路:相较于原来从缓存中查询不到数据后直接查询数据库而言,现在的方案是 进行查询之后,如果从缓存没有查询到数据,则进行互斥锁的获取,获取互斥锁后,判断是否获得到了锁,如果没有获得到&am…

配置中心

服务配置中心介绍 首先我们来看一下,微服务架构下关于配置文件的一些问题: 1. 配置文件相对分散。 在一个微服务架构下,配置文件会随着微服务的增多变的越来越多,而且分散 在各个微服务中,不好统一配置和管理。 2. 配置文件无…

PixCake:让你的照片焕发新生的AI人像处理技术修图软件

大家好!今天我要向大家推荐一款令人惊艳的AI人像处理技术修图软件——PixCake像素蛋糕。无论你是摄影爱好者还是普通用户,PixCake都能帮助你将照片修饰得更加出色、生动。 PixCake拥有强大的AI人像处理技术,可以自动识别照片中的人物&#x…

MFC项目添加CUDA支持

文章目录 前言一、开启项目CUDA支持二、链接CUDA库三、链接cu文件 前言 我目前的项目状况是: 拥有一个MFC项目;拥有现成的 .cuh文件 和 .cu文件。 我想做的是:将.cuh和.cu文件放到我的项目中,并且编译成功跑起来 一、开启项目C…

了解JVM的相关概述,发现很多全忘了(文末福利)

1、学之前存在的问题 1、你被JVM伤害过吗? 你是否也遇到过这些问题? 运行着的线上系统突然卡死,系统无法访问,甚至直接OOM!想解决线上JVM GC问题,但却无从下手。新项目上线,对各种JVM参数设置一…

[Linux] shell脚本相关知识

一、shell脚本基础 1.1 shell脚本的作用 shell将人类使用的高级语言翻译成二进制,再将二进制翻译成高级语言。换句话就是人类写了一个命令集合,然后用bash去翻译给硬件执行。 linux中常见的shell: bash:基于gun的框架下发展的shell csh:类…

用向量数据库Milvus Cloud搭建GPT大模型+私有知识库的定制商业文案助手

随着智能助手的不断普及和发展,商业文案的创作也变得更加智能化和定制化。在这个信息爆炸的时代,商业文案的撰写已经不再是简单的文字表达,而是需要结合大数据分析和人工智能技术,以更好地满足目标客群的需求。在本文中,我们将介绍如何利用向量数据库Milvus Cloud搭建GPT大…

rabbit MQ的延迟队列处理模型示例(基于SpringBoot)

说明: 生产者P 往交换机X(typedirect)会发送两种消息:一、routingKeyXA的消息(消息存活周期10s),被队列QA队列绑定入列;一、routingKeyXB的消息(消息存活周期40s&#xf…

Appium移动自动化测试—如何安装Appium

前言 Appium 自动化测试是很早之前就想学习和研究的技术了,可是一直抽不出一块完整的时间来做这件事儿。现在终于有了。 反观各种互联网的招聘移动测试成了主流,如果再不去学习移动自动化测试技术将会被淘汰。 web自动化测试的路线是这样的&#xff1…

使用Mate 40 Harmony OS 4.0版本运行 codelabs ArkUI demo运行非常卡顿,换Mate 60没事

服务类型 DevEco Studio 概述 使用Mate 40 Harmony OS 4.0版本运行 codelabs ArkUI demo运行非常卡顿,换Mate 60没事 官方回复添加链接描述 客户支持工程师 2023-11-21 14:37:19 GMT08:00 尊敬的开发者,您好, 该机型卡顿黑屏为内部已知问题…