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>