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;
  }
}

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

React中封装echarts图表组件以及自适应窗口变化

文章目录 前言环境代码接口使用效果后言 前言 hello world欢迎来到前端的新世界 😜当前文章系列专栏:react.js 🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,…

自动化脚本不稳定,原来是软件弹窗惹的祸,2个方法解决!

很多同学在学习 App 自动化或者在项目中落地实践 App 自动化时,会发现编写的自动化脚本无缘无故的执行失败、不稳定。 而导致其问题很大原因是因为应用的各种弹窗(升级弹窗、使用过程提示弹窗、评价弹窗等等),比如这样的&#xff…

sizeof和strlen的区别

目录 一、 sizeof 二、 strlen 三、 sizeof 和 strlen的对比 一、 sizeof 在学习操作符的时候,我们学习了 sizeof , sizeof 计算变量所占内存内存空间大小的,单位是字节,如果操作数是类型的话,计算的是使⽤类型创…

No such module ‘FacebookCore‘

在下面的地方添加这个库

算法——滑动窗口(Sliding Window)

一、背景知识 滑动窗口算法(Sliding Window): 在给定数组 / 字符串上维护一个固定长度或不定长度的窗口。可以对窗口进行滑动操作、缩放操作,以及维护最优解操作。题型一:固定长度题型二:不固定长度 二、例…

【Java】智慧工地管理系统源代码,支持二次开发,SaaS模式

智慧工地系统围绕工程现场人、机、料、法、环及施工过程中质量、安全、进度、成本等各项数据满足工地多角色、多视角的有效监管,实现工程建设管理的降本增效。 一、行业现状 1、施工现场管理难:安全事故频发,人工巡检难度大,质量进度协同难等…

一文让你上手Linux常用命令(考前十分钟快速突击+零基础阅读)

文章目录 前言Linux 常用命令1. 基本操作lscdpwd 2. 对文件的操作touchcatechovim 3. 对目录的操作mkdirrm 4. 移动文件 / 目录的操作cpmv 5. 总结基本操作6. 必不可少的实用操作mangreppsnetstat 总结 前言 本文内容为 Linux 的一些超常用命令, 内容不多且十分实用, 这些命令…

前端开发学习 (二) 事件修饰符、系统命令

其实,我们上一章的时候就已经说过了一些系统指令,这里详细介绍一下 一、v-on的事件修饰符 事件作用click点击时触发submit表单被提交时触发input输入框发生改变时触发keyup按键松开时触发keydown按键按下时触发mouseover鼠标悬停触发mouseout当鼠标移开…

Python基础教程: sorted 函数

嗨喽,大家好呀~这里是爱看美女的茜茜呐 sorted 可以对所有可迭代的对象进行排序操作, sorted 方法返回的是一个新的 list,而不是在原来的基础上进行的操作。 从新排序列表。 👇 👇 👇 更多精彩机密、教程…

数字IC基础:有符号数和无符号数加、减法的Verilog设计

相关阅读 数字IC基础https://blog.csdn.net/weixin_45791458/category_12365795.html?spm1001.2014.3001.5482 本文是对数字IC基础:有符号数和无符号数的加减运算一文中的谈到的有符号数加减法的算法进行Verilog实现,有关算法细节请阅读原文&#xff0…

一个月B站涨粉200万,品牌号不可错过的吸粉秘籍

越来越多品牌为了持续在B站营销而创建品牌官方账号,发布原创作品融入B站UP主中,吸引B站用户塑造品牌形象,提高品牌传播度、品牌声量。 据飞瓜数据(B站版)统计,B站有着超过2万个品牌号,本篇文章…

Linux系统管理与服务器安全:构建稳健云数据中心

💂 个人网站:【 海拥】【神级代码资源网站】【办公神器】🤟 基于Web端打造的:👉轻量化工具创作平台💅 想寻找共同学习交流的小伙伴,请点击【全栈技术交流群】 在当今数字化时代,云数据中心已经成…

【23真题】劝退211!今年突变3门课!

今天分享的是23年云南大学847(原827)的考研试题及解析。同时考SSDSP的院校做一个少一个,珍惜!同时考三门课的院校,复习压力极大,但是也会帮大家劝退很多人,有利有弊,请自行分析~ 本…

【人工智能】知识表示与知识图谱

目录 前言 一、知识与知识表示的概念 二、知识图谱 总结 🌈嗨!我是Filotimo__🌈。很高兴与大家相识,希望我的博客能对你有所帮助。 💡本文由Filotimo__✍️原创,首发于CSDN📚。 📣如…

AIGC创作系统ChatGPT网站系统源码,支持最新GPT-4-Turbo模型

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统,支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美,可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如…

WPF实战项目十五(客户端):RestSharp的使用

1、在WPF项目中添加Nuget包,搜索RestSharp安装 2、新建Service文件夹,新建基础通用请求类BaseRequest.cs public class BaseRequest{public Method Method { get; set; }public string Route { get; set; }public string ContenType { get; set; } &quo…

bclinux aarch64 openeuler 20.03 LTS SP1 部署 fastCFS

基于已配置好的4个节点部署ceph-0 ceph-1 ceph-2 ceph-3(早期ceph测试环境,名称就不修改了) 获取fcfs.sh mkdir /etc/fcfs cd /etc/fcfs wget http://fastcfs.net/fastcfs/ops/fcfs.sh 配置/etc/fcfs/fcfs.settings # 要安装的集群版本号…

深度神经网络下的风格迁移模型

版权声明:本文为博主原创文章,转载请在显著位置标明本文出处以及作者网名,未经作者允许不得用于商业目的。 斯坦福大学李飞飞团队的风格迁移模型是一种基于深度学习的图像处理技术,可以将一张图像的风格转移到另一张图像上。该模型…

现在的投资环境有利黄金代理商吗?

和其他比较传统的黄金投资工具相比,现货黄金的优势在于它50倍的杠杆、T0的双向交易机制,以及全天接近24小时的交易时间。近年来全球地缘政治冲突频发,未来美国经济可能陷入衰退,这些都是利好黄金市场因素,不难预计人们…

创业新选择:社区牛奶直供站的成本低、灵活性高

创业新选择:社区牛奶直供站的成本低、灵活性高 相较于传统的实体店铺而言,选择社区牛奶直供站作为创业方式具有明显的优势。首先,社区牛奶直供站的创业成本大大降低。相较于租赁店面和支付昂贵的装修费用,创业者可以将更多的资金用…