位置: 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渠道)

  • 淘宝好评改差评修在哪里修改(淘宝好评改差评 还能改回来吗)

    淘宝好评改差评修在哪里修改(淘宝好评改差评 还能改回来吗)

  • 一对一红包怎么超过200(一对一红包最多能发多少)

    一对一红包怎么超过200(一对一红包最多能发多少)

  • zao视频怎么保存不了(zao视频如何保存)

    zao视频怎么保存不了(zao视频如何保存)

  • 硬盘装不了系统怎么办(硬盘装不了系统什么问题)

    硬盘装不了系统怎么办(硬盘装不了系统什么问题)

  • 手机后面鼓起来怎么回事(手机后面鼓起来了是怎么回事)

    手机后面鼓起来怎么回事(手机后面鼓起来了是怎么回事)

  • 华为p40是安卓系统还是鸿蒙系统(华为p40是安卓几)

    华为p40是安卓系统还是鸿蒙系统(华为p40是安卓几)

  • 手机送话器在哪个位置(手机送话器在哪里调)

    手机送话器在哪个位置(手机送话器在哪里调)

  • 拼多多商品轮播图是什么意思(拼多多商品轮播图质量不佳怎么办)

    拼多多商品轮播图是什么意思(拼多多商品轮播图质量不佳怎么办)

  • 加微信显示对方拒绝接收你的消息(加微信显示对方被加好友过于频繁)

    加微信显示对方拒绝接收你的消息(加微信显示对方被加好友过于频繁)

  • 小米手机充电发烫是什么原因(小米手机充电发烫什么原因怎么处理)

    小米手机充电发烫是什么原因(小米手机充电发烫什么原因怎么处理)

  • 笔记本电脑在哪调声音(笔记本电脑在哪下载软件)

    笔记本电脑在哪调声音(笔记本电脑在哪下载软件)

  • 1080分辨率是多少像素(1080分辨率是多少hz)

    1080分辨率是多少像素(1080分辨率是多少hz)

  • 手机怎么在照片上打字(手机怎么在照片上加文字)

    手机怎么在照片上打字(手机怎么在照片上加文字)

  • 星标朋友有什么提醒么(星标朋友有什么用)

    星标朋友有什么提醒么(星标朋友有什么用)

  • xps文件手机怎么打开

    xps文件手机怎么打开

  • 拼多多待分享什么意思(拼多多待分享什么意思,怎么拼单)

    拼多多待分享什么意思(拼多多待分享什么意思,怎么拼单)

  • ipad坏了怎么办(ipad被停用了之后怎么办)

    ipad坏了怎么办(ipad被停用了之后怎么办)

  • 华为手机屏幕上的返回键在哪设置(华为手机屏幕上的时间和日期怎么调出来)

    华为手机屏幕上的返回键在哪设置(华为手机屏幕上的时间和日期怎么调出来)

  • 金立的故事锁屏怎么取消(金立的故事锁屏怎么关闭)

    金立的故事锁屏怎么取消(金立的故事锁屏怎么关闭)

  • 栈的初始状态啥意思(什么是栈的初始状态)

    栈的初始状态啥意思(什么是栈的初始状态)

  • 荣耀20怎么设置nfc(荣耀20怎么设置闹钟铃声)

    荣耀20怎么设置nfc(荣耀20怎么设置闹钟铃声)

  • 小米8青春版耗电快怎么办(小米8青春版耗电时长只能显示1个小时吗)

    小米8青春版耗电快怎么办(小米8青春版耗电时长只能显示1个小时吗)

  • win7共享打印机没有权限访问(win7共享打印机给win10怎么设置)

    win7共享打印机没有权限访问(win7共享打印机给win10怎么设置)

  • 如何以快捷方式安装字体(如何以快捷方式打印文件)

    如何以快捷方式安装字体(如何以快捷方式打印文件)

  • Windows 11 CO-21H2 22000.194 正式版官方下载地址(附esd微软三语直链下载x64+arm64)

    Windows 11 CO-21H2 22000.194 正式版官方下载地址(附esd微软三语直链下载x64+arm64)

  • 什么是销项税额抵减
  • 厂房自用和出租税收区别
  • 留存收益的个别资本成本率计算公式
  • 印花税技术服务合同按什么交
  • 新个税系统如何操作
  • 房地产开发票的时间
  • 固定资产处置后账务处理
  • 提供咨询服务的小规模企业是一般纳税人吗
  • 新会计准则开办费分摊
  • 计提持有至到期投资减值准备
  • 个人应纳税所得额怎么算
  • 转让不动产增值税预缴
  • 购入材料过程中支付运费
  • 不动产进项税额分两年抵扣
  • 长期待摊费用的摊销方法
  • 印花税资产划转
  • 建筑工程劳务承包
  • 企业零申报教学视频
  • 公司账户境外汇款
  • 中途做账的企业如何建账
  • 季度不超30万需计提增值税吗
  • 营业执照号码含义
  • 确认收入后又退部分款怎么做账
  • 存货减值准备计提
  • Linux系统怎么调整屏幕亮度
  • 跨年的暂估成本怎么冲回
  • 其他应收款贷方重分类到哪个科目
  • 金蝶k3外购入库单套打设置
  • 穿越火线下载安装
  • 外贸出口换汇成本怎么计算
  • 累计带薪缺勤的核算和计量
  • 工程合同主要看什么
  • 完美解决怠速抖动加油就平稳
  • laravel learnku
  • 其他综合收益属于什么类
  • 车辆购置税的计税基础
  • 材料发票入账
  • 同一控制下的控股合并中,合并方个别财务报表
  • 公司购买办公用房可以抵税吗
  • 转让股权后公司资产
  • 公司收取保证金违法吗
  • 长期待摊费用的摊销年限有规定吗?
  • 猿创设计科技有限公司
  • ip和以太网的区别
  • vue.js简介
  • 已入账的发票跨年退回税务
  • 原材料用于在建工程,进项税为什么不转出
  • sqlserver连接数据库的方法
  • 什么人适合单干
  • 借调是原单位发工资吗
  • mysql error!
  • 税控盘是什么会计科目
  • 小规模纳税人每月不超过10万
  • 住宿费专票可以抵扣进项税吗税率多少
  • 模具成本核算汇总表
  • 装修费未计入长期费用
  • 银行贴现手续费可以税前扣除吗
  • 其他应付款冲账摘要怎么写
  • 所有者权益科目有哪些
  • 怎么看发票的凭证号
  • 胶水属于什么开发工具
  • 研发收入超过研发成本
  • 本年利润年末有余额怎么回事
  • windows性能监视器横坐标
  • 喝了阿胶补血口服液嗜睡
  • mac截屏后的图片在哪里
  • windos8怎么样
  • ubuntu邮箱客户端
  • subss
  • linux 常见
  • mysqld-nt.exe - mysqld-nt是什么进程 有什么用
  • 关机你的电脑遇到问题,需要重新启动,我们只收集
  • win7系统误删文件可以恢复吗
  • tomcat怎么启动
  • 使用express
  • 天津市国税局网站
  • 湖南省低保电话是多少?
  • 个体工商户税务注销流程及需要的资料
  • 工商局税务局合并了吗
  • 零申报的企业残保金怎么申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设