关于无界在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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/822662.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue3页面跳转白屏

场景描述 在vue3项目中&#xff0c;使用layout封装布局&#xff0c;页面跳转时左侧菜单栏展示正常&#xff0c;右侧出现白屏&#xff0c;刷新页面后正常显示。 解决方案 方案一&#xff1a;查看是在template标签下面是否有直接的注释&#xff0c;如果有需要把注释写到div里面。…

安卓手机APP开发__媒体开发部分__音轨的选择

安卓手机APP开发__媒体开发部分__音轨的选择 目录 概述 查询可用的音轨 修改轨道选择参数 基于约束的轨道选择 选择特定的轨道 禁用轨道的类型和组 定制化轨道选择器

npm命令卡在reify:eslint: timing reifyNode:node_modules/webpack Completed in 475ms不动

1.现象 执行npm install命令时&#xff0c;没有报错&#xff0c;卡在reify:eslint: timing reifyNode:node_modules/webpack Completed in 475ms不动 2.解决办法 &#xff08;1&#xff09;更换淘宝镜像源 原淘宝 npm 域名http://npm.taobao.org 和 http://registry.npm.ta…

git clone自动安装最新版本,如何选择安装自己想要的其他版本,最简单解决方法

比如本人最新在安装 git clone https://github.com/synthetik-technologies/blastfoam.git 本人想要其中的3.0版本&#xff0c;但是上面git clone默认是使用最新版本6.2.0 这时候可以先执行 git clone https://github.com/synthetik-technologies/blastfoam.git 然后由…

【C++】力扣OJ题:构建杨辉三角

Hello everybody!今天给大家介绍一道我认为比较经典的编程练习题&#xff0c;之所以介绍它是因为这道题涉及到二维数组的构建&#xff0c;如果用C语言动态构建二维数组是比较麻烦的&#xff0c;而用C中STL的vector<vector<int>>,就可以立马构建出来&#xff0c;这也…

React-Redux(一)

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;React篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来React篇专栏内容:React-Redux&#xff08;一&#xff09; 目录 1、简介 2、三大原则&#xff08;重点&#xf…

ECharts数据大屏展示效果

ECharts数据大屏展示效果 前言1、效果预览1.2、视频效果 2、使用框架3、如何处理屏幕自适应效果4、ECharts模块、dataV大屏插件 编写与布局5、往期回顾总结&#xff1a; 前言 数据大屏需整体效果好看&#xff0c;界面缩放自适应大小&#xff0c;全屏展示铺满整个屏幕并自适应&a…

米哈游(原神)一面算法原题

特斯拉裁员 10% 昨天&#xff0c;特斯拉发全员信&#xff0c;宣布全球裁员超 10%。 在内部信中&#xff0c;特斯拉 CEO 埃隆马斯克表示&#xff1a;"多年来&#xff0c;我们发展迅速&#xff0c;在全球范围内开设了多家工厂。随着增长&#xff0c;某些部门出现了角色和工作…

分布式基础环境搭建

使用 Linux 安装 Docker 环境,并启动数据库,缓存等容器服务 分布式基础环境搭建 一、安装 docker1.1、卸载系统之前的 docker1.2、安装 Docker-CE1.3、启动 docker1.4、设置 docker 开机自启1.5、测试 docker 常用命令1.6、配置 docker 镜像加速二、docker 安装 mysql2.1、下…

面经学习(众智宏图实习)

个人评价 难度还是有的&#xff0c;中等难度吧&#xff0c;可能是因为项目使用的是物流项目&#xff0c;该项目本来就比较庞大难度比较高&#xff0c;流的八股文我真的是一点不会&#xff0c;还需要加强&#xff0c;reidis的多路io复用模型没有深问&#xff0c;要是问了就寄了&…

HTML段落标签、换行标签、文本格式化标签与水平线标签

目录 HTML段落标签 HTML换行标签 HTML格式化标签 加粗标签 倾斜标签 删除线标签 下划线标签 HTML水平线标签 HTML段落标签 在网页中&#xff0c;要把文字有条理地显示出来&#xff0c;就需要将这些文字分段显示。在 HTML 标签中&#xff0c;<p>标签用于定义段落…

Golang面试题四(GMP)

目录 1.Goroutine 定义 2.GMP 指的是什么 3.GMP模型的简介 全局队列&#xff08;Global Queue&#xff09; P的本地队列 P列表 M列表 4.有关P和M的个数问题 P的数量问题 M的数量问题 P和M何时会被创建 5.调度器P的设计策略 复⽤线程 work stealing机制 hand off…

算法 第41天 动态规划3

343 整数拆分 给定一个正整数 n &#xff0c;将其拆分为 k 个 正整数 的和&#xff08; k > 2 &#xff09;&#xff0c;并使这些整数的乘积最大化。 返回 你可以获得的最大乘积 # 动态规划 def integerBreak(n:int)->int:dp[0]*(n1)dp[2]1 #从下标为2开始 &#xff0…

本地生活服务平台都有哪些,靠谱吗?

随着本地生活服务的发展潜力和盈利方式被不断挖掘&#xff0c;越来越多的人开始发现其中所蕴含着的巨大商机&#xff0c;大家所熟悉的抖音、小红书和支付宝等平台也纷纷上线了本地生活板块&#xff0c;再次印证了其前景的广阔。在此背景下&#xff0c;普通人想要趁势入局分一杯…

Linux ARM平台开发系列讲解(QEMU篇) 1.1 编译QEMU 构建RISC-V64架构 运行Linux kernel

1. 概述 QEMU可以模拟很多架构的CPU(ARM,RISC-V等),重点是免费,用来学Linux简直太适合不过了,所以,我打算开一章节来教QEMU的使用,这样也方便环境统一调试,本章节就讲解如何在Ubuntu搭建QEMU,我的环境是全新的Ubuntu22,QEMU下载的9.0,kernel下载的6.0. 2. 源码下载…

已适配开源鸿蒙OpenHarmony 4.1,Purple Pi OH开发板与时俱进

2024年4月3日&#xff0c;备受瞩目的OpenHarmony 4.1 release版本正式发布。值得一提的是&#xff0c;触觉智能的Purple Pi OH已经成功适配了这一新版本&#xff0c;展现出强大的兼容性和前沿的技术实力。此次升级不仅彰显了OpenHarmony在开放能力和应用生态方面的持续进步&…

定制k8s域名解析------CoreDns配置实验

定制k8s域名解析------CoreDns配置实验 1. 需求 k8s集群内通过CoreDns互相解析service名. 同时pana.cn域为外部dns解析,需要通过指定dns服务器进行解析 再有3个服务器,需要使用A记录进行解析 2. K8s外DNS服务器 查看解析文件 tail -3 /var/named/pana.cn.zone 解析内容 ww…

免费申请泛域名证书

通配符证书是一种比较特殊的SSL/TLS 证书&#xff0c;可用于保护多个域名&#xff08;含主域名&#xff09;&#xff0c;由域名字段中的通配符 (*) 指示。这种证书主要用于具有很多子域的组织。通配符证书对主域及其所有次级子域有效。 对于免费通配符证书而言&#xff0c;目前…

IAR 使用笔记(IAR BIN大小为0异常解决)

烧写 由于芯片的内部SPI FLASH的0级BOOT 程序起到到开启JTAG SW 仿真功能&#xff0c;一旦内部SPI FLASH存储的BL0启动代码被损坏&#xff0c;芯片的JTAG 将不能被连接。所以对BL0的烧写需要谨慎&#xff0c;烧写BL0过程保证芯片不断电。 如果烧写了多备份的启动代码&#xff…

datalist 是什么?以及作用是什么?

datalist 是 HTML5 中引入的一个新元素&#xff0c;它用于为 <input> 元素提供预定义的选项列表。当用户开始输入时&#xff0c;浏览器会显示一个下拉列表&#xff0c;其中包含与输入值匹配的 datalist 中的选项。这使得用户可以更容易地从预定义的选项中选择&#xff0c…