最近一个需求，需要在 Vue 项目中加入 含有iframe 的页面，同时在路由切换的过程中，要求iframe的内容 不会被刷新 。一开始使用了Vue自带的keep- alive发现没有用，于是自己研究了一下解决方案。。。。。。
Vue的keep-alive原理
要实现对保持iframe页的状态。我们先搞清楚为什么Vue的keep-alive不能凑效。keep-alive原理是把组件里的节点信息保留在了 VNode （在内存里），在需要渲染时候从Vnode渲染到真实DOM上。iframe页里的内容并不属于节点的信息，所以使用keep-alive依然会重新渲染iframe内的内容。 另外 ，我也尝试有过想法：如果把整个iframe节点保存起来，然后需要切换时把它渲染到目标节点上，能否实现iframe页不被刷新呢？————也是不可行的，iframe每一次渲染就相当于打开一个新的网页窗口，即使把节点保存下来，在渲染时iframe页还是刷新的。
实现的思路
既然保持iframe页里的状态很难实现，在这个时候我想到了一个别的方法。能否在Vue的route-view节点上动点手脚？使得在切换 非iframe页 的时候使用Vue的路由，当切换 iframe页 时则使用 v-show 切换显示与隐藏，使得iframe节点 一直不被删除 ，这样就能保持iframe的状态了。
我们简陋的实现一下以上的效果，上代码：
入口main.js:
import Vue from 'vue/dist/vue.js'
import App from './App.vue'
import VueRouter from 'vue-router';
const Index = {
template: '<div>Index</div>' }
const routes = [
path: '/f1',
name: 'f1'
path: '/f2',
name: 'f2'
path: '/index',
component: Index
const router = new VueRouter({
routes
});
Vue.use(VueRouter);
new Vue({
render: h => h(App),
router
}).$mount('#app')
<template>
<div id="app">
<div class="nav">
<router-link class="router" to="/f1">Go to F1</router-link>
<router-link class="router" to="/f2">Go to F2</router-link>
<router-link class="router" to="/index
前言最近一个需求，需要在 Vue 项目中加入 含有iframe 的页面，同时在路由切换的过程中，要求iframe的内容 不会被刷新 。一开始使用了Vue自带的keep- alive发现没有用，于是自己研究了一下解决方案。。。。。。Vue的keep-alive原理要实现对保持iframe页的状态。我们先搞清楚为什么Vue的keep-alive不能凑效。keep-alive原理是把组件里的节点信息保留在了 VNode （在内存里），在需要渲染时候从Vnode渲染到真实DOM上。iframe页里的内容并不属
最近一个需求，需要在Vue项目中加入含有iframe的页面，同时在路由切换的过程中，要求iframe的内容不会被刷新。一开始使用了Vue自带的keep- alive发现没有用，于是自己研究了一下解决方案。。。。。。
Vue的keep-alive原理
要实现对保持iframe页的状态。我们先搞清楚为什么Vue的keep-alive不能凑效。keep-alive原理是把组件里的节点信息保留在了V...
包含进程管理的PV操作--消产问题、读写问题；内存管理的计算题；文件管理的计算题。IO管理的计算题不准备更新，如有大佬路过or new idea 欢迎私聊或评论，让我们一起完善它！多图
进程管理-PV操作
有差值的容器
基本分页存储计算公式
计算占字节、占页数等
进制转化类型
计算访存次数
基本分段存储计算公式
页面置换算法
分页与分段之比较-摘自王道
链式、连续、索引存储
访盘次数 / 平均访盘次数IO管理
单双缓冲计算题
要在Vue中使用iframe实现keep alive，可以使用Vue的<keep-alive>组件来缓存iframe的内容，这样可以避免每次切换路由时都重新加载iframe。具体步骤如下：
1. 创建一个Vue组件，该组件包含一个iframe元素，例如：
<template>
<iframe ref="iframe" :src="src"></iframe>
</template>
<script>
export default {
props: {
src: {
type: String,
required: true
methods: {
reload() {
this.$refs.iframe.contentWindow.location.reload(true);
</script>
2. 在需要使用iframe的路由组件中，使用<keep-alive>组件将该组件包裹起来，例如：
<template>
<keep-alive>
<iframe-component :src="src" v-if="showIframe" ref="iframeComponent" />
</keep-alive>
</template>
<script>
import IframeComponent from "@/components/IframeComponent.vue";
export default {
components: {
IframeComponent
data() {
return {
showIframe: true,
src: "http://example.com"
methods: {
reloadIframe() {
this.$refs.iframeComponent.reload();
</script>
注意：使用<keep-alive>组件时，需要使用v-if来判断是否显示组件，否则缓存将无效。
这样就可以在Vue中使用iframe实现keep alive了。
