实现目标:

  1. 内部零碎相干配置放在配置文件中
  2. 内部零碎渲染入口放在主零碎中,由主零碎router管制内部零碎的加载
  3. 内部零碎加载过程展现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>