关于无界在vue中的应用

无界的链接地址：https://wujie-micro.github.io/doc/
当我们配置好我们的页面是子应用的时候

1.处理好路由

1.对于我们定义的微前端服务，我们处理方式

if (v.frame === true && !v.children.length && !v.unNeedMicroView) {
      v.component = MicroView;
      v.meta.frameSrc = v.path;
    }

再针对于嵌入的功能，我们给他**MicroView组件，然后我们看看MicroView**组件在干什么
1.主应用，以我本地启动的项目 http://localhost:884/web/hazard-web/hazard/hiddenMap/index 为例子

<script setup lang="ts">
import wujieVue from "wujie-vue3";
const currentRoute = useRoute();
//拿到当前的路由
let metaUrl: any = unref(currentRoute.meta)?.frameSrc;  // web/hazard-web/hazard/hiddenMap/index
//判断如果有路由
if (metaUrl) {
	//开发环境调试
  if (import.meta.env.MODE == "development") {
  	  if (metaUrl.indexOf("/web/hazard") >= 0) {
  	  	 frameSrc.value = ("http://localhost:884" + metaUrl) as string;
  	  }
 }else{
 	//正式环境地址替换
 	 frameSrc.value = (location.origin + metaUrl) as string;
 }
}
//针对于hash路由模式进行拼接处理
const urlArr = metaUrl.split("/web/syyj-admin-front");
frameSrc.value = (location.origin +`/web/syyj-admin-front/#${urlArr[1]}`) as string;


</script>
<template>
  <div class="frame">
    <!-- 主应用
    {{ frameSrc }} --> 
    <WujieVue
      v-if="frameSrc && frameSrc.indexOf('/hazard') >= 0"
      ref="frameRef"
      width="100%"
      name="fdp"
      :url="frameSrc"
      :sync="true"
      class="frame-iframe"
    ></WujieVue>
  </div>
</template>   

2.主应用的事件通信

watch(
  currentRoute,
  (value) => {
    let src: any = value.meta?.frameSrc || "";
    console.log("主应用跳转", src); // 主应用跳转 /web/hazard-web/hazard/hiddenMap/index
    wujieVue.bus.$emit("sys-router-change", src);
  },
  {
    immediate: true,
  }
);

子应用接受通信 App.vue

<script setup lang="ts">
const router = useRouter();
(window as any).$wujie?.bus.$on("sys-router-change", function (res) {
  console.log("你到hazard来了1:" + res); // 你到hazard来了1:/web/hazard-web/hazard/hiddenMap/index
  let data = res;
  if (res.indexOf("web/hazard-web") >= 0) {
    data = data.split("web/hazard-web")[1];
    router.replace({
      path: data,
    });
  }
});
onBeforeUnmount(() => {
  (window as any).$wujie?.bus.$off("sys-router-change", function (res) {
    console.log(res);
  });
});
</script>

<template>
  <RouterView />
</template>

<style lang="scss" scoped>
.el-popup-parent--hidden {
  padding-right: 0 !important;
  overflow: hidden !important;
}
</style>