image.png
背景
qiankun + vue2.6 + element-ui, 通過標(biāo)簽卻換不同功能， 當(dāng)前一個子應(yīng)用下可以對應(yīng)多個功能, 及 存在統(tǒng)一應(yīng)用下切換，跨應(yīng)用切換。 當(dāng)前已通過路由嵌套實現(xiàn)子應(yīng)用獨立管理各自路由，主應(yīng)用負(fù)責(zé)跨應(yīng)該路由切換。子應(yīng)用使用手動加載。
目的
- 同時維持多個子應(yīng)用實例
- 應(yīng)用切換不丟失
- 加載失敗時，可二次重載
- 需要同時維持多個子應(yīng)用實例
- 子應(yīng)用加載成功后切換不丟失
- 子應(yīng)用加載失敗后可重載
問題
- 手動加載子應(yīng)用失敗后，二次加載乾坤未重載的應(yīng)用
- 子應(yīng)用切換后將丟失，造成多次需要重復(fù)加載
- 初始加載時間過長
主要的目的是盡量減少子應(yīng)用的二次加載，避免資源的重復(fù)請求.
方案
觸發(fā)重載
image.png
加載失敗后，我們需要用戶再次開啟功能時，進行重載。 而qiankun當(dāng)前對統(tǒng)一子應(yīng)用做的緩存處理，首先需要觸發(fā)qiankun 重載。參考
這里在構(gòu)建配置文件時，為請求地址添加一個更新編號, 當(dāng)需要重載時，更新該編號， 再次手動加載時，將觸發(fā)子應(yīng)用的二次加載.
維持實例
這里通過keep-alive 保存我們子應(yīng)用實例。需要解決的問題是，當(dāng)應(yīng)用加載失敗時， 我們需要通知keep-alive 排除之前保存的實例對象。 所以需要設(shè)置 exclude 屬性. 加載子應(yīng)用時，監(jiān)聽加載結(jié)果。成功： exclude 組件名出棧, 失?。篹xclude 組件名入棧.
image.png
image.png
image.png
需要注意的是， keep-alive 是通過組件名稱判斷緩存的， 所以在加載前，我們需要先為每個子應(yīng)用分配獨立的組件并注冊到容器組件中.
