Nuxt作为主应用集成qiankun，SKIP_BECAUSE

网上的教程几乎都是主页中直接接入微应用，在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。

Nuxt作为主应用集成qiankun，SKIP_BECAUSE_BROKEN报错相关推荐

sqlserver 遇到以零作除数错误的处理不报错的解决方法
sqlserver 遇到以零作除数错误的处理不报错的解决方法参考文章: (1)sqlserver 遇到以零作除数错误的处理不报错的解决方法 (2)https://www.cnblogs.com/ ...
django2.0集成xadmin0.6报错集锦
django2.0集成xadmin0.6报错集锦 1.django2.0把from django.core.urlresolvers修改成了django.urls 报错如下: 1 2 3 File ...
sqlserver 遇到以零作除数错误的处理不报错的解决方法
原文:sqlserver 遇到以零作除数错误的处理不报错的解决方法使用sqlserver 的选项来禁止出现以零除的错误中断,让而让其为null set ansi_warnings off SET ...
zabbix集成onealert验证报错：create media type failed! error message
zabbix集成onealert验证报错:create media type failed! error message 一.报错详细信息 [root@host-10-10-6-20 bin]# ba ...
H.265流媒体播放器EasyPlayer.js集成时页面报错出现“X”，该如何解决？
在上几期的文章中,我们介绍了关于EasyPlayer流媒体播放器最近更新的一些功能和细节优化,包括网页实时录像.ios端低延迟直播,以及如何删除或替换播放器loading样式等,感兴趣的用户可以翻阅我 ...
Springboot集成ES启动报错
报错内容 None of the configured nodes are available elasticsearch.yml配置 cluster.name: ftest node.name: n ...
SpringBoot集成Redis 启动报错
SpringBoot启动报错:Field redisTemplate in com.test.redis.controller.TestController required a bean of ty ...
springboot集成shiro RememberMe 报错 RememberMe services will not be performed for account
报错信息如下: o.a.shiro.mgt.DefaultSecurityManager : Delegate RememberMeManager instance of type [org.apac ...
集成ShareSDK里报错NSConcreteMutableData wbsdk_base64EncodedString]
百度一大堆都说在这个里加个-ObjC,然后加了还是有问题最近谷歌了下才要加入这个才正常了,国内的开发者只是一知半解的---- 转载于:https://www.cnblogs.com/songxing ...

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

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

Nuxt作为主应用集成qiankun，SKIP_BECAUSE_BROKEN报错相关推荐

最新文章

热门文章