微前端子应用卸载时组件没销毁，怎么解决？

兴敏 Dev 提问于 2026-02-25 13:31:22 阅读 29

前端

我在用 qiankun 搭建微前端项目，主应用加载 Vue 子应用没问题，但切换路由卸载子应用时，发现子应用的组件没有被销毁，生命周期钩子 beforeDestroy 也没触发。是不是我哪里没配对？

子应用入口是这样写的：

<template>
  <div id="app">
    <MyComponent />
  </div>
</template>

<script>
export default {
  name: 'App',
  beforeDestroy() {
    console.log('App destroyed');
  }
}
</script>

主应用用的是手动加载方式，调用了 unmount 方法，但好像没起作用……

应用卸载

我来解答赞 2 收藏

反馈

1 条解答

Designer°欣胜 Lv1

检查一下你的子应用入口文件里有没有正确导出 mount 和 unmount 生命周期钩子，qiankun 的卸载依赖这两个函数，Vue 子应用的销毁逻辑必须在 unmount 里手动调用 app.$destroy() 或者 app.unmount()，否则组件不会销毁。
比如你的 main.js 应该长这样：

import { createApp } from 'vue'

import App from './App.vue'



let app = null



function render(props = {}) {

  const { container } = props

  app = createApp(App)

  app.mount(container ? container.querySelector('#app') : '#app')

}



if (!window.__POWERED_BY_QIANKUN__) {

  render()

}



export async function mount(props) {

  render(props)

}



export async function unmount() {

  if (app) {

    app.unmount()

    app = null

  }

}

2026-02-25 14:03