vue的页面缓存带有iframe的页面(转载)

近期做vue + element-ui的后台项目,用keep-alive作缓存,新提了个需求,要动态地向路由中嵌套iframe

网上的解决方案如下,觉得挺有灵性的,做下记录:

Vue中对iframe实现keep alive无刷新的方法

他这主要思路是嵌套的页面不用keep-alive包裹,而是通过v-show控制显示隐藏,很有灵性,但总感觉怪怪的...

因项目需求中嵌套的iframe页面希望的是通过路由来动态嵌套iframe页,嵌套页面数量不定,因此想要动态渲染, v-for不可避免,但正如网上方案所说,页面登录进来之后就会渲染iframe, 因此还是需要v-if来判断是否渲染,而v-for与v-if不能共用(项目中的eslint限制),因此给外层套了个壳子,用v-for结合v-if(关闭缓存后重新打开刷新页面的关键)v-show(缓存页面的关键)来实现缓存与清除缓存的设置。

此方案虽然可行,但总感觉有些别扭,大佬们有更好的思路或方案可以一起交流一下

 

posted @ 2021-07-13 15:33  程序员笔记--vue  阅读(3119)  评论(0编辑  收藏  举报