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

  • 荣耀手机505g网络怎么开(荣耀50网速太慢怎么回事)

    荣耀手机505g网络怎么开(荣耀50网速太慢怎么回事)

  • ldnal00什么型号(ldnal00是什么型号华为)

    ldnal00什么型号(ldnal00是什么型号华为)

  • 苹果xr有时候会出现屏幕按不动(苹果xr有时候会自动重启)

    苹果xr有时候会出现屏幕按不动(苹果xr有时候会自动重启)

  • 钉钉手机共享屏幕视频没有声音(钉钉手机共享屏幕ppt)

    钉钉手机共享屏幕视频没有声音(钉钉手机共享屏幕ppt)

  • ipad蓝牙键盘部分按键失灵(ipad2019蓝牙键盘)

    ipad蓝牙键盘部分按键失灵(ipad2019蓝牙键盘)

  • 处理器可以换吗(台式机处理器可以换吗)

    处理器可以换吗(台式机处理器可以换吗)

  • i53320m处理器属于什么水平(i53320m处理器属于什么档次)

    i53320m处理器属于什么水平(i53320m处理器属于什么档次)

  • 淘宝邀请新人注册有什么奖励(淘宝邀请新人注册)

    淘宝邀请新人注册有什么奖励(淘宝邀请新人注册)

  • 手机息屏后打不开(手机黑屏打不通电话)

    手机息屏后打不开(手机黑屏打不通电话)

  • 华为黑屏无法唤醒屏幕(华为黑屏无法唤醒怎么办)

    华为黑屏无法唤醒屏幕(华为黑屏无法唤醒怎么办)

  • 通常所说的裸机是指计算机仅有什么(通常所说裸机包括)

    通常所说的裸机是指计算机仅有什么(通常所说裸机包括)

  • 企业微信直播可以美颜吗(企业微信直播可以发红包吗)

    企业微信直播可以美颜吗(企业微信直播可以发红包吗)

  • 华为平板看视频不能全屏怎么办(华为平板看视频卡顿怎么解决)

    华为平板看视频不能全屏怎么办(华为平板看视频卡顿怎么解决)

  • 易微联与wifi配对原理(易微联wifi模块说明书)

    易微联与wifi配对原理(易微联wifi模块说明书)

  • 小米cc9听音乐声音忽大忽小(小米cc9e声音消失)

    小米cc9听音乐声音忽大忽小(小米cc9e声音消失)

  • 乐播投屏投不上是什么原因(乐播投屏投不上去怎么回事儿)

    乐播投屏投不上是什么原因(乐播投屏投不上去怎么回事儿)

  • 一线屏显示器是什么意思(显示器一线和二线品牌区别)

    一线屏显示器是什么意思(显示器一线和二线品牌区别)

  • 手机号注销了快手还能用吗(手机号注销了快递信息怎么查)

    手机号注销了快手还能用吗(手机号注销了快递信息怎么查)

  • oppo电话黑名单在哪里?(oppo电话黑名单在哪里解除)

    oppo电话黑名单在哪里?(oppo电话黑名单在哪里解除)

  • qq群冻结期怎么解除(qq群冻结期怎么转让群主)

    qq群冻结期怎么解除(qq群冻结期怎么转让群主)

  • qq什么时候显示离线(qq什么时候显示在线)

    qq什么时候显示离线(qq什么时候显示在线)

  • 小米充电器支持pd协议吗(小米充电器支持qc3.0)

    小米充电器支持pd协议吗(小米充电器支持qc3.0)

  • ps炫光怎么做(ps怎么做出炫酷光效效果)

    ps炫光怎么做(ps怎么做出炫酷光效效果)

  • pst文件怎么打开(pst 文件)

    pst文件怎么打开(pst 文件)

  • 手机APP闪退是什么原因(手机app闪退是什么原因 怎么解决)

    手机APP闪退是什么原因(手机app闪退是什么原因 怎么解决)

  • OPPO手机怎么调整亮度(oppo手机怎么开空调)

    OPPO手机怎么调整亮度(oppo手机怎么开空调)

  • 荣耀20pro怎么删除软件(荣耀20pro怎么删除系统更新)

    荣耀20pro怎么删除软件(荣耀20pro怎么删除系统更新)

  • 微信怎么删除聊天列表(微信怎么删除聊天框)

    微信怎么删除聊天列表(微信怎么删除聊天框)

  • vivox27怎样调大微信声音(vivox27的大小)

    vivox27怎样调大微信声音(vivox27的大小)

  • 华为GT与佳明的差距(佳明和华为运动手表)

    华为GT与佳明的差距(佳明和华为运动手表)

  • 税收筹划分为哪几类
  • 财务报告与财务报表的联系与区别
  • 城市维护建设税的计税依据是什么
  • 去参加博览会的英文
  • 主管盾和制单盾的区别
  • 投标保证金退回规定
  • 加计扣除和研发费不一致
  • 新注册公司开银行卡流程
  • 投资理财产品怎么选
  • 冲销估价入账
  • 投标保证金支付时间
  • 公司多久不做账会被注销?
  • 工地运输费是什么费用
  • 业务宣传及广告费超比例
  • 养牛场增值税的税率是多?
  • 一般纳税人开劳务费税率是多少2023
  • 电子产品企业用电量大吗
  • 桌面图标间距特别大
  • 公司贷款过桥费合法吗
  • 天猫魔合
  • uniapp实战视频教程
  • 企业为员工提供服务要交增值税吗
  • 企业购入设备涉及的税种
  • php自定义header
  • Treetop walkway in Hainich National Park, Thuringia, Germany (© mauritius images GmbH/Alamy)
  • php自定义字段
  • php产品
  • php页面刷新代码
  • vue中事件
  • 代缴社保可以领住房补贴吗
  • pdclient
  • 商业银行贷款业务按担保形式分,可分为( )
  • 利息收入做账
  • python输入函数帮助
  • php swoole 协程
  • 解决胃胀气最快方法
  • sql server 触发器定时触发
  • 发票开具与小票的关系是怎样的
  • 城市维护建设税,教育费附加,地方教育费附加
  • 其他应收款增加会计分录
  • 企业自产自用的产品需要缴纳增值税吗
  • 印花税不减免
  • mysql最新版怎么中文
  • sql函数的作用
  • 哪些属于发票
  • 劳务报酬所得税可以退税吗
  • 收到分红的会计科目
  • 仓库发货打包员工作内容
  • 如何计提材料跌价准备
  • 建筑工程劳务分包,工伤责任承担
  • 其他综合收益什么时候转留存收益什么时候转损益
  • 工会经费是应付职工福利还是管理费用
  • 应收票据和应付票据的区别
  • 一次性收入怎么计税
  • 税务会计每个月几号需要干工作流程
  • 房地产开发企业建造的商品房,在出售前
  • sqlserver如何查看操作日志
  • sql 判断数据是否存在
  • sql server中Select count(*)和Count(1)的区别和执行方式
  • mysql 5.7.24安装
  • 无法安装mysql数据库
  • ie8 开发者工具
  • mac通讯录怎么删除
  • wmpdmc.exe是什么意思
  • linux计划任务怎么写
  • win8 设置
  • win7系统笔记本怎么连接wifi
  • lnmp php
  • win8点设置没反应
  • 安卓开发框架mvvm
  • Android 近百个项目的源代码
  • 批处理程序
  • javascript获取css
  • bud3d跑酷
  • javascript函数如何定义及其作用
  • jquery的gt
  • 企业代理申报还用自己申报吗
  • 税务征管科与纳税人有接触吗
  • 土地 荒
  • 为什么10月份社保交不了
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设