位置: IT常识 - 正文

vue项目关于iframe嵌套的页面,在切换tab标签时会被重新刷新的问题处理方案(vue的iframe)

编辑:rootadmin
vue项目关于iframe嵌套的页面,在切换tab标签时会被重新刷新的问题处理方案 1.需求

推荐整理分享vue项目关于iframe嵌套的页面,在切换tab标签时会被重新刷新的问题处理方案(vue的iframe),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue中iframe如何传值,vue项目关于时间的js封装,vue frame,vuex iframe,vue iframe onload,vue的iframe,vue项目关于时间的js封装,vuex iframe,内容如对您有帮助,希望把文章链接给更多的朋友!

这两天工作中遇到一个这样的需求,切换tab标签时,要求对应的tab页面不刷新,但是项目中加入了一部分含有iframe的页面,在切换路由的过程中,如果使用keep-alive是达不到缓存ifram嵌套的页面效果的。

2.使用keep-alive缓存不了iframe界面的原因vue中的keep-alivevue项目关于iframe嵌套的页面,在切换tab标签时会被重新刷新的问题处理方案(vue的iframe)

1>.原理:vue 的缓存机制并不是直接存储 DOM 结构,而是将 DOM 节点抽象成了一个个 VNode节点。因此,Vue 的 keep-alive 缓存也是基于 VNode节点 而不是直接存储 DOM 节点。在需要渲染的时候从Vnode渲染到真实DOM上。

2>.参数:Keep-alive 组件提供了 include 和 exclude 两个属性,允许组件有条件的进行缓存。 include: 字符串或正则表达式。只有匹配的组件会被缓存。 exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

3>.iframe中keep-alive机制失效原因:iframe页里的内容并不属于节点的信息,所以使用keep-alive依然会重新渲染iframe内的内容。而且iframe每一次渲染就相当于打开一个新的网页窗口,即使把节点保存下来,在渲染时iframe页还是刷新的。

3. vue中实现iframe内容缓存的思路保存iframe页里的节点信息我们很难去操作,这个时候我们就该想是否能在vue的route-view节点上动些手脚。我们可以在切换不含iframe的界面时使用vue路由,在切换含iframe页的界面时利用v-show来控制显示隐藏,使iframe的节点不被删除,以此来防止界面节点被重新更新,从而达到保存iframe节点数据的效果。4. 解决步骤:

综上所述,主要思路就是利用v-show去控制对应tab的iframe显示隐藏,使iframe的节点不被删除,以此来防止界面节点被重新更新,从而达到iframe页面的缓存效果。

iframe页面对应的路由配置:如下: { path: '', component: Layout, redirect: 'indexNew1', hidden: true, children: [ { path: 'indexNew1', component: (resolve) => require(['@/views/indexNew1'], resolve), meta: { title: ''} }, ] }, // 在这里需要找到Layout文件中对应的<router-view>

-根据上面的路由配置,找到了对应的layout组件中的router-view的引用,即appMain.vue页面

<template> <section class="app-main" :class="this.$route.path=='/tinyApp/tinyAppRate'?'app1':''"> <transition name="fade-transform" mode="out-in"> <keep-alive>// 这里加载的就是正常的vue页面 <router-view v-if="this.$route.path!=='/indexNew1'" /> </keep-alive> </transition> // 针对iframe嵌套的页面需要将封装的iframe组件引入,因为是多个嵌套的页面,所以这里需要循环生成 <iframe-index v-show="$route.query.id==item.id" v-for="item of tabSetList" :key="item.id" :newSrc="item.baseUrl" ></iframe-index> //这里的tabSetList数组就是你点击某菜单对应的此菜单信息的iframe相关属性 //因为tab有删除功能,所以不能用下标做key值 </section></template><script>// 引入iframe组件import iframeIndex from "@/views/indexNew1.vue";export default { name: 'AppMain', components:{ iframeIndex }, data(){ return{ tabList:[], tabSetList:[], } }, watch:{ $route(){ console.log('Rouer ------ ',this.$route) }, //这里是根据我项目的需求写的具体逻辑,不用参考 '$store.state.tagsView.sceneViews'(newVal){ this.tabList = [...newVal] this.tabSetList = this.tabList.filter((currentValue, currentIndex, selfArr) =>{ return selfArr.findIndex(x =>x.name === currentValue.name) === currentIndex });} },}</script>封装一个对应的iframe显示的组件// 这里只是放了部分代码 具体逻辑根据对应的需求添加即可<template> <div class="dashboard-editor-container"> <div style="width: 100%" class="itemflex-div"> <iframe :src="newSrc" class="iframemain" allowfullscreen="true" id="iframeId" ></iframe> </div> </div></template><script>export default { props:{ newSrc:{ type:String, default:'' } },};</script>综上所述,就是实现多iframe嵌套页面在切换tab时可以缓存对应页面的信息注意:因为tab一版包括删除功能,所以在循环iframe组件时对应的key值不能用数组下标,取一个唯一值即可,这里我取的是id
本文链接地址:https://www.jiuchutong.com/zhishi/283453.html 转载请保留说明!

上一篇:ImageDrive.exe进程什么文件 ImageDrive是什么进程(image driver)

下一篇:Win11 Beta 渠道首个预览版将在月底发布(windows11 beta渠道)

  • 税收分类编码怎么导出来
  • 退个税app操作
  • 接受捐赠的增值税处理
  • 其他应收款收不回来税务处理
  • 债券到期账务处理
  • 新入职员工哪月交社保
  • 技术使用费所得税怎么算
  • 业务招待费税前扣除比例
  • 计税依据的三种类型
  • 向非关联企业捐赠现金会计分录
  • 工资发多了需要退回吗
  • 房产开发公司土地增值税计算方法
  • 应付职工薪酬科目有余额怎么调整
  • 小规模企业是否需要备案登记
  • 财产保险合同的主体变更
  • 电信宽带费发票专票
  • 小微企业需要开公户吗
  • 税务行政强制行为遵循的原则
  • 出纳可以做记账表格吗
  • 股权购买会计分录
  • 企业空气检测费应该计入什么会计科目核算?
  • 增值税小规模纳税人免征增值税政策
  • 原材料实际成本法核算问题
  • 收到上年度企业所得税退税款
  • linux中添加用户和组的操作
  • 股东的车辆保险费可在公司报销?
  • 无形资产的确认与计量
  • 国内保理业务是担保类中间业务吗
  • 题管理录入新内容
  • php初学
  • 残疾人就业保障金有什么好处
  • PHP:imagepalettetotruecolor()的用法_GD库图像处理函数
  • laravel pay
  • 间接人工费用预算工时分配率将提高10%
  • 一般纳税人在什么情况下,不可以开具增值税专用发票
  • 软件企业认定好处
  • 浅谈php中变量的使用情况
  • java开发和运维
  • 实时视频功能
  • vue2计算属性和vue3的计算属性的区别
  • 公司购买手机的发票
  • 各人所得税法规定
  • 修理费账务处理
  • sql2005sp4
  • 帐外资金
  • 外经证办好了后怎么开票
  • 员工误餐费是否缴纳个人所得税
  • 小规模纳税人每月不超过10万
  • 冲去年管理费用
  • 收到的成本票怎么做账
  • 原材料变为商品怎么做账
  • 资产计提减值如何进行账面记录
  • 公司之间的借款利息有最小限制吗
  • 留抵税额在账上没有,怎么办
  • 所得税会计凭证包括哪些
  • 为什么一般纳税人可以选择简易计税
  • 公司的钱如何提出来
  • 做账工资和申报工资不一样
  • Navicat for MySQL(mysql图形化管理工具)是什么?
  • sql事务处理
  • mysql mac下载
  • qpso算法
  • centos at命令
  • 如何把virtualbox虚拟机里面的文件传到主机
  • 进入pe系统后c盘变成了e盘
  • 运行方式包括什么方式
  • ubuntu 14.4
  • linux安装.gz
  • win7怎样关闭ie浏览器
  • win7断电后无法正常启动
  • unity3d打开
  • 黑马程序员android移动开发基础教程
  • javascript怎么学
  • 北京市国家税务局网站官网
  • 如何将个税人员信息改为非正常
  • 12366纳税服务热线工作时间
  • 浙江国税咨询电话12306
  • 车辆购置税如何入账
  • 票据贴现的票据是什么
  • 公司注销时注册资金未缴完
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设