vue的keep-alive如何缓存iframe?

问题描述

        最近有个项目，用tab做路由切换，但是其中一个tab页由iframe组成（将这个tab命名为tabA），每次切换到tabA时都会重新加载iframe，加载时间过长，由此可知keep-alive没有缓存iframe。（要解决每次切换iframe加载时间过长的问题就必须做出类似缓存的效果。）

为什么keep-alive没缓存iframe?

        keep-alive缓存的是虚拟节点，并不是缓存真实dom。通过对节点的debugger也能看出每次tab切换时，会将上一个路由的真实节点removeChild掉。

那怎么办？

        网上提供的办法就是含iframe的子路由的component不再进行展示，而是在匹配子路由时显示（v-show）包含iframe的组件

vue中使用keep- alive缓存机制，切换标签含有iframe标签的界面会被重新刷新的问题处理 | 码农家园

 

 具体步骤

1、注释掉iframe有关路由的component，先使其不展示。 

2、在router-view的下方使用前面注释掉的组件（ScriptContent.vue），当路由匹配时展示这个组件

 

结束啦