Nuxt作为主应用集成qiankun,SKIP_BECAUSE_BROKEN报错

网上的教程几乎都是主页中直接接入微应用,在layout的default.vue加上container的标签,其他的参考官网就行了。但是在子路由中嵌入为页面就会出现第一可以加载成功,回退再进入子路由时就会报微页面挂载不上的错误

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

网上查了很久,在官网中找到这样一句话:

如何在主应用的某个路由页面加载微应用

必须保证微应用加载时主应用这个路由页面也加载了。

在nuxt的子路由就有问题了,qiankun是监听url的变化去加载微应用的,nuxt也是,并且nuxt生成页面慢于 qiankun的加载,所以qiankun加载微页面的时候,container标签并未生成。

尝试了很多办法想以优雅的方式解决,然而并不能,最后采用了之前解决跳转路由地址无变化时nuxt也报错的相同解决办法,在跳转页和目标页之间加一个桥接页面,该桥接页面的layout与目标页相同,这样container的标签就加载完成,由于桥接页面和目标是同一个layout,container标签并不会丢失。

代码如下:

<template>
  <div>
  </div>
</template>
<script>
/**
 * qiankun桥接,qiankun监听url变化加载子应用,但nuxt也是,可qiankun在前,会导致layout中的container标签尚未加载,微应用无法注入。
 * 采用该桥接,提前加载好layout,以及container标签。
 */
export default {
  name:'Bridge',
  layout:'subapp',
  created(){
    this.$router.replace(this.$route.query.to)
  }
}
</script>

跳转页(主页)的跳转事件改为:

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

appid是微应用的name。

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值