iframe实现vue嵌套外部系统

Posted 2021-09-16 qzuser

实现目标：

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>