关于无界在vue中的应用

本文主要是介绍关于无界在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 }} --> <WujieVuev-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/indexwujieVue.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/indexlet 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>