Vue3中调用外部iframe链接方法

业务场景,点击某个按钮需要跳转到外部iframe的地址,但是需要在本项目内显示。以前项目中写过调用外部链接的功能,是有菜单的,但是这次是按钮,所以不能直接把地址配到菜单里。

实现方法:在本地路由文件里写个路由,meta里的iframe地址设为空字符串,然后在点击按钮的页面通过一个方法,获取以前配置过跳外部iframe的菜单地址(红框里的),并替换路径,然后再把新地址设置到写的路由文件里,再携带参数跳转。

1、 src/router/index.ts,增加路由,@/views/Iframe/index.vue这个组件是写好的解析路径的组件

 {path: '/',component: LayoutComponent,name: 'XXX预览',children: [{path: '/4705778289',component: () => import('@/views/Iframe/index.vue'),name: '4705778289',meta: {hidden: true,title: 'XXX预览',iframe: "",id: "4705778289",outorin: '1',},}],meta: {hidden: true,}}

2、在routerHelper.ts文件里写一个查找某条路由的方法,以前iframe使用uuid查找,但是这里查找的时候需要加个?,所以改了一下uuid的方法,改成了直接传入一个参数

// 根据name,从多层数组获取路由对象。 
export const getRouteItemByIframeUuidName = (name, ignoreType = true)=>{const list = permissionStore.getAllAuthMenu;if(!name){ return false; }let resultlet hasFound = falseconst fn = function(list, name){for(let i=0; i < list.length; i++){if(list[i]?.meta?.iframe?.includes?.(name) && !hasFound && (ignoreType ? true : list[i].moduletype === '1')){result = list[i]hasFound = true}else if(list[i].children && list[i].children.length > 0){fn(list[i].children, name)}}}fn(list, name)return result
}

3、在文件里引入方法,使用递归方法 getRouteItemByIframeUuidName('secondnet?')查找包含字符串,找到后台添加的iframe地址,

4、找到后使用replace替换secondnet,替换为secondnetpreview,

5、然后引入router文件,通过循环找到这条路由,更新meta.iframe,然后再携带query跳转

 

 import { getRouteItemByIframeUuidName } from '@/utils/routerHelper'import { constantRouterMap } from '@/router' // 写的路由文件里的路由<el-tooltip effect="dark" content="XXX按钮" placement="right" popper-class="atooltip"><el-buttontype="primary"plainsize="small"@click="goSecondnet"class="goFirstnet font14 iconfont"><i class="iconfont iconjinruerciguanwang"></i></el-button></el-tooltip>// 调取预览:type:4;ObjectID :编号goSecondnet() {const cur = getRouteItemByIframeUuidName('secondnet?'); // 通过方法获取以前配置过的地址const url = cur.meta.iframe.replace('secondnet', `secondnetpreview`) // 路径替换为现在需要的路径// 修改在路由文件里刚刚写的路由的iframeconstantRouterMap.forEach(item => {if (item.name == 'XXX预览') {if (item.children[0].name == '4705778289') {item.children[0].meta.iframe = url;}}});// 携带参数跳转if (props.selectEle?.type == "communityRange" && props.selectEle?.item) {router.push({ path: '/4705778289', query: {id: props.selectEle?.item.STATIONID,type: '4',}});}},

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

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

相关文章

计算机组成原理-Cache写策略

文章目录 总览写命中写回法全写法 写不命中写分配法非写分配法 多级Cache总结 总览 写命中 写回法 数据不一致指的是Cache中的和主存中的数据不一致 全写法 写缓冲 利用写缓冲使得将写入Cache的数据在写入Cache的数据同时也会写入写缓冲。然后再在 CPU在干其他事时有控制电…

基于动量的梯度下降

丹尼尔林肯 (Daniel Lincoln)在Unsplash上拍摄的照片 一、说明 基于动量的梯度下降是一种梯度下降优化算法变体&#xff0c;它在更新规则中添加了动量项。动量项计算为过去梯度的移动平均值&#xff0c;过去梯度的权重由称为 Beta 的超参数控制。 这有助于解决与普通梯度下降相…

【Spring】Spring是什么?

文章目录 前言什么是Spring什么是容器什么是 IoC传统程序开发控制反转式程序开发理解Spring IoCDI Spring帮助网站 前言 前面我们学习了 servlet 的相关知识&#xff0c;但是呢&#xff1f;使用 servlet 进行网站的开发步骤还是比较麻烦的&#xff0c;而我们本身程序员就属于是…

【转】ORB-SLAM2调用OAK-D双目摄像头进行点云建图

编辑&#xff1a;OAK中国 首发&#xff1a;A. hyhCSDN 喜欢的话&#xff0c;请多多&#x1f44d;⭐️✍ 内容来自用户的分享&#xff0c;如有疑问请与原作者交流&#xff01; ▌前言 Hello&#xff0c;大家好&#xff0c;这里是OAK中国&#xff0c;我是助手君。 近期在CSDN刷…

马斯克发布一封指控 Sam Altman 的匿名信引发猜测,OpenAI “宫斗大戏”终迎结局?

就在昨晚&#xff0c;持续了数日的 OpenAI 宫斗大戏&#xff0c;似乎终于要大结局了——OpenAI 官宣&#xff1a;Sam Altman 将回归 OpenAI&#xff0c;重新担任 CEO&#xff01; “我们已达成原则性协议&#xff0c;Sam Altman 将重返 OpenAI 担任 CEO&#xff0c;新的初始董…

OpenGL的学习之路 -5

1.视景体 正交投影 人眼看世界&#xff0c;有一个可见范围。范围内可见&#xff0c;范围外不可见。视景体就是这么一个概念。 &#xff08;上图仅学习记录用&#xff09; 在OGL中&#xff0c;有两种投影方式&#xff0c;对应两种视景体。第一种&#xff0c;正交投影&#xf…

Linux进程状态(僵尸进程,孤儿进程)+进程优先级+进程调度与切换

Linux进程状态[僵尸进程,孤儿进程]进程优先级 一.进程状态1.进程排队2.教材上对于进程状态的描述:1.阻塞挂起 3.Linux下具体的进程状态:1.Linux下的进程状态数组2.R3.S:可终止睡眠---浅度睡眠1.补充:前台进程和后台进程2.一种"奇怪"的现象 4.D:不可终止睡眠---深度睡…

探索人类命运与宇宙奥秘的震撼之旅 豆瓣高分巨作《三体》湖北卫视开播

当思考触及宇宙的边缘&#xff0c;当人类命运与外星文明相碰撞&#xff0c;电视剧《三体》以其深邃的内涵和引人深思的故事&#xff0c;重新审视人类的过去、现在和未来&#xff0c;带我们逐步揭开地外未知文明“三体”世界的神秘面纱。根据著名科幻作家刘慈欣同名小说改编&…

Ubuntu新手使用教程

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

Django之ORM

ORM全称对象关系映射 作用&#xff1a;通过python面向对象的代码简单快捷的操作数据库&#xff0c;但是封装程度太高&#xff0c;有时候sql语句的效率偏低&#xff0c;需要自己写sql语句 类----->表 对象--->记录 对象属性--->记录某个字段对应的值 写在models.p…

如何通过内网穿透实现远程访问Linux SVN服务

文章目录 前言1. Ubuntu安装SVN服务2. 修改配置文件2.1 修改svnserve.conf文件2.2 修改passwd文件2.3 修改authz文件 3. 启动svn服务4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射本地端口 5. 测试公网访问6. 配置固定公网TCP端口地址6.1 保留一个固定的公网TCP端口地址6…

骑行三家村赏红杉之旅:挑战与汗水共存,美景和惊喜同行的路线

2023年11月25日&#xff0c;一个冬日里阳光明媚的周末&#xff0c;校长骑行队的骑友们相约&#xff0c;共同踏上了骑行三家村赏红杉林的旅程。这次骑行路线从大观公园门口开始&#xff0c;途径大观湿地公园、干勾尾、碧鸡关加油站、太平、水沟盖板路、明朗、绝望坡、山顶、三家…

kali安装内网穿透工具并实现ssh远程连接

文章目录 1. 启动kali ssh 服务2. kali 安装cpolar 内网穿透3. 配置kali ssh公网地址4. 远程连接5. 固定连接SSH公网地址6. SSH固定地址连接测试 简单几步通过[cpolar 内网穿透](cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站)软件实现ssh远程连接kali 1…

成都优优聚美团代运营——让您脱颖而出!

随着互联网的快速发展&#xff0c;越来越多的企业开始注重线上业务的拓展&#xff0c;而美团作为国内领先的生活服务平台之一&#xff0c;自然成为了许多品牌宣传和推广的重要渠道。在成都地区&#xff0c;优优聚美团代运营公司凭借多年的经验和专业团队的优势&#xff0c;成为…

单调栈:LeetCode 907. 子数组的最小值之和

907. 子数组的最小值之和 给定一个整数数组 arr&#xff0c;找到 min(b) 的总和&#xff0c;其中 b 的范围为 arr 的每个&#xff08;连续&#xff09;子数组。 由于答案可能很大&#xff0c;因此 返回答案模 10^9 7 。 思路同乘法原理 LeetCode 828. 统计子串中的唯一字符-…

护眼灯有效果吗?对孩子眼睛好的护眼台灯推荐

2022年12月29日&#xff0c;内蒙古消费者协会发布的比较试验结果显示&#xff0c;被检测的35款读写作业台灯样品中有12款标记项目不符合国家强制性标准要求&#xff0c;占被检测样品的34%&#xff0c;其中博士有成、大力智能、霍尼韦尔位列质量黑榜。该从哪些方面注意权衡做好选…

如何用CHAT配置linux的远程连接?

问CHAT&#xff1a;配置linux的远程连接 1.下载ssh 2.启动ssh服务 3.查看ssh服务状态 4.设置ssh服务开机自启动 5.设置windows的cmd下ssh 6.通过cmd的ssh命令远程到linux linux的ip:10.8.9.23 用户名:Li CHAT回复&#xff1a;以下是为配置Linux的远程连接的步骤说明&#xff1a…

AMD ROCm软件栈组件介绍

AMD ROCm™ Platform 1.1 ROCm简介 参考&#xff1a;https://github.com/RadeonOpenCompute/ROCm ROCm&#xff08;Radeon Open Compute&#xff09;开源软件栈。 在NVIDIA GPU上&#xff0c;术语“CUDA”通常是指GPU编程编译器、API和运行时库&#xff0c;但ROCm不那么单一…

【虹科干货】什么是软件成分分析(SCA)?

大家或许都发现了&#xff0c;开发人员愈发依赖开源代码来快速为其专有软件添加功能。据估计&#xff0c;开源代码占专有应用程序代码库的 60-80%。相伴而来的&#xff0c;除了更高的效率&#xff0c;还有更高的风险。因此&#xff0c;管理开源代码对于降低组织的安全风险至关重…

原神「神铸赋形」活动祈愿现已开启

亲爱的旅行者&#xff0c;「神铸赋形」活动祈愿现已开启&#xff0c;「单手剑静水流涌之辉」「法器碧落之珑」概率UP&#xff01; 活动期间&#xff0c;旅行者可以在「神铸赋形」活动祈愿中获得更多武器与角色&#xff0c;提升队伍的战斗力&#xff01; 〓祈愿时间〓 4.2版本更…