vue页面和 iframe多页面无刷新方案和并行存在解决方案

面临问题 : back的后台以jsp嵌套iframe为主, 所以在前端框架要把iframe无刷新嵌套和vue页面进行并行使用,vue的keep-alive只能对虚拟dom树 vtree 进行缓存无法缓存iframe,所以要对iframe进行处理

tab标签的切换效果具体参考若依框架的tab切换,可以去若依看源码,若依源码没有实现这个效果,以下代码基于若依源码进行优化

一开始打算把每个iframe嵌入到router页面里面,但这样会导致几十个iframe页面全部占用内存,用v-show显示,所以要做成点击的才会占有内存

实现效果

  1. 每个iframe页面有单独的路由
  2. 刷新页面可以对当前iframe页面进行刷新
    
  3. vue 页面未缓存和缓存和iframe页面3者进行并行存在,并且达到效果
    
  4. 刷新标签可以对iframe页面进行刷新
    
  5. 点击才会占用内存
    

解决方案 采用iframe和keeplive分开的方案,用v-show进行判断,把每个iframe嵌入到router里的/frame/: 的动态路由里面,用户点击iiframe的菜单就会生成一个 /iframe/brand-list的页面,页面根据逻辑去找到对应iframe去生成tab,并且建立内存资源达到切换tab不刷新的效果 以下为实现效果*
在这里插入图片描述 最终实现效果,5个页面切换 无感刷新,并且iframe动态引入

iframe路由页面
//iframe 路由
const commonPath = import.meta.env.VITE_APP_PATH || 'g-back'getIframeList(){return[{fullPath:`${commonPath}/iframe/brand-list`,path:`${commonPath}/iframe/brand-list`,// name:"brand-list",meta:{title:"品牌维护",link:'baidu.com',}},{fullPath:`${commonPath}/iframe/brand-list`,path:`${commonPath}/iframe/category-goodsType`,// name:"category-goodsType",meta:{title:"品牌分类",link:'baidu.com',}},{fullPath:`${commonPath}/iframe/brand-list`,path:`${commonPath}/iframe/standard-list`,// name:"standard-list",meta:{title:"商品标准",link:'baidu.com',}}]}router.js页面 vue路由
const remainingRouter: AppRouteRecordRaw[] = [{path: `/`,redirect: '/g-back/index',},{path: '/g-back',redirect: '/g-back/index',children: [{path: '/g-back/index',component: () => import('@/views/home/index.vue'),name: 'index',meta: { title: '首页', icon: 'dashboard' }}]},{path: '/404',component: () => import('@/views/404/index.vue'),name: '404',meta: { title: '404', icon: 'dashboard'}},{path: `${commonPath}/iframe/:id`,component: () => import('@/views/iframe/index.vue'),meta: {title: 'iframe',link:true}},{path: '/redirect',// hidden: true,children: [{path: '/redirect/:path(.*)',component: () => import('@/views/redirect/index.vue')}]}
]
以上 所有的iframe页面都存在/iframe/:id 中 ,用动态路由展示iframe的页面 
以上 brand-list 就是品牌维护的页面路由
App.vue页面
<template><section class="app-main"><router-view v-slot="{ Component, route }" :key="routes.path" v-if="!routes.meta.link"><transition name="fade-transform" mode="out-in"><keep-alive :include="tagsViewStore.cachedViews"><component v-if="!route.meta.link" :is="Component"  /></keep-alive></transition></router-view><iframe-toggle /></section>
</template><script setup>
import iframeToggle from "../IframeToggle/index.vue";
import useTagsViewStore from "@/store/modules/tagsView";
const routes = useRoute()
watch(routes,(val)=>{console.log(val)
})
const tagsViewStore = useTagsViewStore();
</script>
注意一定要给router-view key值,以实现每个iframe页面的变化,router-view都会改变它的路由
iframeToggle页面
<template><inner-linkv-for="(item, index) in uniqBy(iframeViews,'path')":key="item.path":iframeId="'iframe' + index"v-show="route.path === item.path":src="iframeUrl(item.meta.link, item.query)"></inner-link>
</template><script setup>
import InnerLink from "../InnerLink/index.vue";
import useTagsViewStore from "@/store/modules/tagsView";
import { uniqBy } from 'lodash'const route = useRoute();
const tagsViewStore = useTagsViewStore();
const iframeViews = computed(()=>tagsViewStore.iframeViews)// console.log(iframeViews.value)
function iframeUrl(url, query) {// if (Object.keys(query).length > 0) {//   let params = Object.keys(query).map((key) => key + "=" + query[key]).join("&");//   return url + "?" + params;// }return url;
}
</script>
InnerLink页面
<template><div v-loading="loading" :style="'height:' + height"><iframe:id="iframeId"style="width: 100%; height: 100%":src="src"frameborder="no"></iframe></div>
</template><script setup>
const props = defineProps({src: {type: String,default: "/"},iframeId: {type: String}
});
const loading = ref(true)
const height = ref(document.documentElement.clientHeight - 94.5 + "px;")onMounted(() => {setTimeout(() => {loading.value = false;}, 300);window.onresize = function temp() {height.value = document.documentElement.clientHeight - 94.5 + "px;";};
})
</script>

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

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

相关文章

C++设计模式——Proxy代理模式

一&#xff0c;代理模式简介 代理模式是一种 结构型设计模式&#xff0c;该模式通过引入一个新的代理对象Proxy&#xff0c;来间接访问原始对象&#xff0c;从而使访问方式变得灵活和可控。 代理对象的设定减少了客户端与真实对象之间的直接交互。 通过引入代理对象来间接访问原…

农资投入品系统架构:数字化农业的技术支撑与创新

在当今数字化时代&#xff0c;农业领域也在迅速迈向数字化和智能化的新阶段。农资投入品系统作为农业生产的重要支撑&#xff0c;其系统架构的设计与创新对于提高农业生产效率、保障粮食安全具有重要意义。本文将探讨农资投入品系统架构的设计原则、核心模块以及未来发展趋势。…

OrangePi AIpro测评:性能、应用与开发者体验解析

一、OrangePi AIpro介绍 OrangePi AIpro(8T)采用昇腾AI技术路线&#xff0c;具体为4核64位处理器AI处理器&#xff0c;集成图形处理器&#xff0c;支持8TOPS AI算力&#xff0c;拥有8GB/16GB LPDDR4X&#xff0c;可以外接32GB/64GB/128GB/256GB eMMC模块&#xff0c;支持双4K高…

AI虚拟试穿技术:开启高保真、多场景、多样化服装组合的试穿应用

随着电子商务的快速发展,消费者对于在线购物体验的要求越来越高。特别是在服装领域,消费者渴望能够在购买前直观地了解服装的试穿效果。传统的虚拟试穿技术虽然已有一定的发展,但在不同场景下的高保真度和鲁棒性方面仍面临挑战。为此,我们研发了一种全新的AI虚拟试穿技术,…

2.spring cloud gateway 源码编译

spring cloud gateway编译 1.编译 命令 mvn clean compile -U2.报错 报错信息 核心信息 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-checkstyle-plugin:3.1.2:check (checkstyle-validation) on project spring-cloud-gateway-mvc: Failed during …

【分布式技术专题】「OceanBase深度解析」 探索OceanBase产品矩阵与核心设计

探索OceanBase产品矩阵与核心设计 OceanBase的六大特性高扩展高可用多租户&#xff08;资源隔离&#xff09;OceanBase架构和功能OceanBase广泛的数据源支持 OceanBase的六大特性 OceanBase以其卓越的产品平台整合方案&#xff0c;充分展现了六大核心特性的卓越与全面。这一方…

C++ | Leetcode C++题解之第150题逆波兰表达式求值

题目&#xff1a; 题解&#xff1a; class Solution { public:int evalRPN(vector<string>& tokens) {int n tokens.size();vector<int> stk((n 1) / 2);int index -1;for (int i 0; i < n; i) {string& token tokens[i];if (token.length() >…

人工智能将成为数学家的“副驾驶”

人工智能将成为数学家的“副驾驶” 数学传统上是一门独立的科学。1986年&#xff0c;安德鲁怀尔斯为了证明费马定理&#xff0c;退到书房里呆了7年。由此产生的证明往往很难让同事们理解&#xff0c;有些至今仍有争议。但近年来&#xff0c;越来越多的数学领域被严格地分解为各…

如何手动实现multiSetIfAbsent、multiExpire

👽System.out.println(“👋🏼嗨,大家好,我是代码不会敲的小符,目前工作于上海某电商服务公司…”); 📚System.out.println(“🎈如果文章中有错误的地方,恳请大家指正!共同进步,共同成长✊”); 🌟System.out.println(“💡如果文章对您有所帮助,希望您可以三…

2024年大数据、区块链与物联网国际会议(ICBDBLT 2024)

2024 International Conference on Big Data, Blockchain, and Internet of Things 【1】大会信息 会议简称&#xff1a;ICBDBLT 2024 大会地点&#xff1a;中国青岛 审稿通知&#xff1a;投稿后2-3日内通知 会议官网&#xff1a;www.icbdblt.com 【2】会议简介 即将召开的…

DDoS攻击:企业与个人都应了解的基本知识

DDoS攻击&#xff0c;全称分布式拒绝服务攻击&#xff08;Distributed Denial of Service attack&#xff09;&#xff0c;是一种常见的网络安全攻击方式。以下是对DDoS攻击的详细解释: DDoS攻击是指攻击者利用大量被控制的计算机或设备&#xff08;通常称为“僵尸网络”或“傀…

签到的二维码怎么制作?快速实现制作二维码签到的方法

现在很多活动会采用二维码的方式来做登记、报名、签到等&#xff0c;通过二维码可以快速获取用户信息&#xff0c;并且对于用户填写内容也提升了便利性&#xff0c;而且还能够节约成本&#xff0c;通过后台就可以查看用户登记的数据&#xff0c;方便后期的分析和信息管理。 想…

考研计组chap3存储系统

目录 一、存储器的基本概念 80 1.按照层次结构 2.按照各种分类 &#xff08;41&#xff09;存储介质 &#xff08;2&#xff09;存取方式 &#xff08;3&#xff09;内存是否可更改 &#xff08;4&#xff09;信息的可保存性 &#xff08;5&#xff09;读出之后data是否…

SwaggerSpy:一款针对SwaggerHub的自动化OSINT安全工具

关于SwaggerSpy SwaggerSpy是一款针对SwaggerHub的自动化公开资源情报&#xff08;OSINT&#xff09;安全工具&#xff0c;该工具专为网络安全研究人员设计&#xff0c;旨在简化广大红队研究人员从SwaggerHub上收集已归档API信息的过程&#xff0c;而这些OSINT信息可以为安全人…

【全网瞩目】最强文生图模型,Stable Diffusion 3技术报告解禁

12号&#xff0c;终于在Hugging Face上出现了 Stable Diffusion 3 Medium。没错&#xff0c;正如他所承诺的&#xff0c;最强文生图模型真的开源了。而且此次开源不仅是以SD2的比较下性能得到了更好的升级&#xff0c;同时也向我们展示了最前沿的DiT技术——MMDiT。 是什么让 S…

【乐吾乐2D可视化组态编辑器】导出HTML,下载离线部署包

乐吾乐2D可视化组态编辑器地址&#xff1a;https://2d.le5le.com/ 使用步骤 1. 从“文件”菜单导出HTML 导出为 HTML 需要一定的开发能力&#xff0c;后续不再维护&#xff0c;即将下线&#xff0c;推荐使用 下载离线部署包&#xff08;html&#xff09; 2. 解压 3. 下载后端…

阿里云运维第一步(监控):开箱即用的监控

作者&#xff1a;仲阳 这是云的时代&#xff0c;现在云计算已经在各行各业广泛的应用。但是上云对于大多数客户来说&#xff0c;依然有很大的学习成本&#xff0c;如下图仅是阿里云都有几百款产品&#xff0c;怎么选择&#xff1f;怎么用&#xff1f;对于客户来说都是问题。“…

手撕设计模式——计划生育之单例模式

1.业务需求 ​ 大家好&#xff0c;我是菠菜啊。80、90后还记得计划生育这个国策吗&#xff1f;估计同龄的小伙伴们&#xff0c;小时候常常被”只生一个好“”少生、优生“等宣传标语洗脑&#xff0c;如今国家已经放开并鼓励生育了。话说回来&#xff0c;现实生活中有计划生育&…

2024网络安全学习路线 非常详细 推荐学习

关键词&#xff1a;网络安全入门、渗透测试学习、零基础学安全、网络安全学习路线 首先咱们聊聊&#xff0c;学习网络安全方向通常会有哪些问题 1、打基础时间太长 学基础花费很长时间&#xff0c;光语言都有几门&#xff0c;有些人会倒在学习 linux 系统及命令的路上&#…

嵌套查询(二)-谓词EXISTS实现嵌套查询

一、EXISTS谓词 1、作用&#xff1a;用于判断一个子查询的结果是否为空 2、使用语法&#xff1a; 【NOT】EXISTS&#xff08;子查询&#xff09; 语义&#xff1a;如果子查询的查询结果不为空&#xff0c;则EXISTS为真&#xff0c;否则为假 二、举例 1、举例1&#xff1a…