关于iframe:iframe实现vue嵌套外部系统

实现目标：

1. 内部零碎相干配置放在配置文件中
2. 内部零碎渲染入口放在主零碎中，由主零碎 router 管制内部零碎的加载
3. 内部零碎加载过程展现 loading

相干代码：

// config.js
export default {
    collect: {staticAddress: 'http://127.0.0.1:9303'},
 application: {staticAddress: 'http://127.0.0.1:9304'}
};

// router.js
import 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>