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.pswp.cn/news/160565.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/160565.shtml
英文地址,請注明出處:http://en.pswp.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…