進入子應用再回到主應用切換動態路由時
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;}
}
打印是這個:
到這里問題就算解決了