前言：
提起vue的缓存，大家第一时间想到的一定是keep-alive，但是了解keep-alive缓存原理的都知道是将节点信息保留在VNode中的组件中（在内存中），并在需要渲染时从VNode渲染到真实DOM。iframe页面中的内容不属于该节点的信息，因此使用keep-alive仍会重新呈现iframe中的内容。但公司很多的项目涉及报表，报表都是以iframe的形式渲染的。
解决思路：
既然keep-alive只对节点信息有缓存，可以考虑在Vue的route-view节点上做点什么吗？切换非iframe页面时，它利用Vue路由；切换iframe页面时，它利用v-show切换显示和隐藏，这样就不会删除iframe节点，从而可以保持iframe状态。
做法：
router下的index.js
引入iframe页面
路由配置
在router-view页面
<div id = "index">
<Header />
<keep-alive>
<router-view />
</keep-alive>
<!-- iframe page -->
<component
v-for="item in hasOpenComponentsArr"
:key="item.name"
:is="item.name"
v-show="$route.path === item.path"
></component>
<Footer />
</div>
</template>
<script>
import Header from '@/views/homePage/homePage_Header'
import Footer from '@/views/homePage/homePage_Footer'
import Vue from 'vue'
export default {
name: "index",
components : {Header,Footer},
created() {
const routes = this.$router.options.routes;
const componentsArr = this.getComponentsArr(routes);
componentsArr.forEach((item) => {
Vue.component(item.name, item.component);
});
this.componentsArr = componentsArr;
this.isOpenIframePage();
},
data() {
return {
iframeArr:[],
componentsArr: []
}
},
watch: {
$route() {
this.isOpenIframePage();
}
},
computed: {
hasOpenComponentsArr() {
return this.componentsArr.filter(item => item.hasOpen);
}
},
methods: {
isOpenIframePage() {
const target = this.componentsArr.find(item => {
return item.path === this.$route.path
});
if (target && !target.hasOpen) {
target.hasOpen = true;
}
},
getComponentsArr(routes) {
routes.map( it => {
if(it.iframeComponent){
const name = it.name || it.path.replace('/', '');
this.iframeArr.push({
name: name,
path: it.path,
hasOpen: false,
component: it.iframeComponent
})
}
if(it.children&&it.children.length>0){
this.getComponentsArr(it.children)
}
})
return this.iframeArr
}
}
}
</script>
<style scoped>
</style>
结语：
文章参看至：https://programmer.help/blogs/keep-alive-no-refresh-for-iframe-in-vue.html
如果大家有好的思路，欢迎交流讨论
网友评论