乾坤qiankun vue项目 loadMicroApp加载子应用 父应用不见了

Question

父 app.vue
`

<template>
<div id="nav">
    11
<!-- 子应用容器 -->
<div id="yourContainer" style="width: 100%;height: 500px;border: 1px solid #ccc;"></div>
</div>
<!-- <router-view/> -->
</template>




<script lang="ts">
import { loadMicroApp, start } from 'qiankun';
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'App',
  data: () => {
    return {
      microApp: null
    }
  },
  mounted() {
    setTimeout(() => {
      this.microApp = loadMicroApp(
        { 
          name: 'app', 
          entry: '//localhost:8081',
          container: '#yourContainer'
        }
      );
      console.log("aaaaaaaaaaaa")
      console.log(this.microApp)
      // start()
    }, 2000)
  }
});
</script>

`

子 main.ts
`

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'


export async function bootstrap() {
    console.log('react app bootstraped');
  }

  /**
   * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
   */
  export async function mount(props: any) {
    console.log(props)
    createApp(App).use(store).use(router).mount('#app')
  }

  /**
   * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
   */
  export async function unmount(props: any) {
      console.log(props)
  }

  /**
   * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
   */
  export async function update(props: any) {
    console.log('update props', props);
  }

`

现在的问题是 当父应用(8080)执行loadMicroApp加载子应用(8081)时

整个父应用(8080)下的内容全都变成了子应用(8081)
按我的理解 子应用应该加载到父应用的id="yourContainer"这个dom中

请教各位大佬这是什么原因

Answer 1

父应用子应用的根组件id都是app造成的冲突 将子应用根组件id修改就可以了