实现目标:
- 内部零碎相干配置放在配置文件中
- 内部零碎渲染入口放在主零碎中,由主零碎router管制内部零碎的加载
- 内部零碎加载过程展现loading
相干代码:
// config.jsexport default { collect: { staticAddress: 'http://127.0.0.1:9303' }, application: { staticAddress: 'http://127.0.0.1:9304' }};
// router.jsimport config from './config.js';import DynamicComponent from './DynamicComponent.vue';{ path: `${baseUrl}/collect`, name: 'collect', props:config.collect, component: DynamicComponent},
// DynamicComponent.vue<template> <keep-alive> <iframe ref="dynamicIframe" :src="staticAddress" frameborder="0" style="width:100%;height:100%;" @load="frameLoaded" /> </keep-alive></template><script>export default { name: "DynamicComponent", props: { staticAddress: { type: String, required: true } }, beforeRouteEnter(to, from, next) { next(vm => { // element-ui loading成果 vm.$showViewLoading(); }); }, beforeDestroy() { this.$off('load', this.frameLoaded); }, methods: { frameLoaded() { this.$closeViewLoading(); } }};</script>