com.kasite.client.business.ui.membership/src/master/views/layout/micro-app-page.vue

<template>
  <micro-app-demo
    :baseroute="`#/${microAppConfig.name}`"
    :data="microAppConfig.data"
    :name="microAppConfig.name"
    :url="microAppConfig.path"
    @beforemount="appBeforemount"
    @mounted="appMounted"
    keep-alive
  ></micro-app-demo>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, ref, nextTick } from "vue";

const { proxy } = getCurrentInstance() as any;
// 微服务设置
const microAppConfig = computed(() => {
  const { Path, isMicroApp, MicroAppName, MicroAppPath } = proxy.$store.state.routeItem;
  return {
    is: isMicroApp,
    name: MicroAppName,
    path: MicroAppPath,
    data: {
      isPage: true,
      redirect: Path.replace(`/${MicroAppName}`, ""),
    },
  };
});

const emits = defineEmits(["update:loading"]);
const appBeforemount = () => {
  emits("update:loading", true);
};

const appMounted = () => {
  emits("update:loading", false);
};
</script>

<style lang="scss" scoped>
micro-app {
  height: 100%;
  width: 100%;
}
</style>