Almost all online tutorials are directly connected to micro applications in the home page, which is in the default of layout Vue is labeled with container, and other reference official websites are OK. However, if the sub route is embedded as a page, the first page can be loaded successfully. When you go back and enter the sub route, you will report an error that the micro page cannot be mounted

Target container with #subapp-viewport not existed while sub-vue mounting!

After searching the Internet for a long time, I found this sentence on the official website:

How to load micro applications on a routing page of the main application

It must be ensured that the routing page of the main application is also loaded when the micro application is loaded.

There is a problem with the sub routing of nuxt. Qiankun listens to the change of URL to load micro applications, and nuxt is the same, and the page generated by nuxt is slower than that of Qiankun. Therefore, when Qiankun loads the micro page, the container tag is not generated.

Many methods have been tried to solve the problem in an elegant way, but they can’t. finally, the same solution that nuxt also reports an error when there is no change in the jump route address is adopted. A bridging page is added between the jump page and the target page. The layout of the bridging page is the same as that of the target page, so that the label of the container is loaded. Because the bridging page and the target are the same layout, The container tag is not lost.

The code is as follows:

<template>
  <div>
  </div>
</template>
<script>
/**
 * qiankun bridge, qiankun listen to url changes to load the sub-application, but nuxt is also, can qiankun in advance, will lead to the layout in the container tag has not been loaded, the micro application can not be injected.
 * Use this bridge to load the layout, and container tags in advance.
 */
export default {
  name:'Bridge',
  layout:'subapp',
  created(){
    this.$router.replace(this.$route.query.to)
  }
}
</script>

The jump event of the jump page (home page) is changed to:

 goto(item){
      this.$router.push('/subapp/bridge?to='+this.appid)
    }

Appid is the name of the micro application.