1.需求
：项目集成了iframe界面展示，点击菜单生成tab切换栏，切换tab的时候iframe集成的界面实现不重新加载。
2.思路：
考虑到每次点击的时候都要重新调去后端的接口，从新渲染iframe加载的界面（只有一个通用的iframe组件），所以能不能考虑到将当前的点击请求的路径进行前端缓存，然后再通过循环来渲染iframe界面，渲染完成后通过css的属性来控制当前的点击的iframe的界面渲染，其他的隐藏掉。
3.实现
：点击左侧菜单的时候来构建一个数组，然后将点击的数组渲染成tab切换标签，同时将点击菜单对应的iframe的请求路径进行数组构建。存储在前端的session中，完成之后在点击tab切换的时候来根据当前的点击的id选择渲染的iframe界面。
大体思路就是这样。。。。。
有其他好的思路的大佬，请给我反馈下，查找了下，好像资源很少很少。。。
最近一个需求，需要在 Vue 项目中加入 含有
iframe
的页面，同时在路由切换的过程中，要求
iframe
的内容 不会被刷新 。一开始
使用
了Vue自带的keep- alive发现没有用，于是自己研究了一下解决方案。。。。。。
Vue的keep-alive原理
要
实现
对保持
iframe
页的状态。我们先搞清楚为什么Vue的keep-alive不能凑效。keep-alive原理是把组件里的节点信息保留在了 VNode （在内存里），在需要渲染时候从Vnode渲染到真实DOM上。
iframe
页里的内容并不属于节点的信息，所以
使用
keep-alive依然会重新渲染
iframe
内的内容。 另外
在
前端
浏览器中，有些数据（比如数据字典中的数据），可以在第一次请求的时候全部拿过来保存在js对象中，以后需要的时候就不用每次都去请求服务器了。对于那些大量
使用
数据字典来填充下拉框的页面，这种
方法
可以极大地减少对服务器的访问。这种
方法
特别适用于
使用
iframe
的框架。
具体
实现
思路和
方法
：
创建一个cache.js文件：
1、
前端
页面，定义那些数据需要一次性拿到
前端
缓存
，定义一个对象来保存这些数据：
* 定义需要在用户登录的时候获取到本地的数据字典类别
var clsCodes = {clsCodes :
[BOOL,
STATUS,
USER_T
<q-text data-data='{"data":{},"options":""}'></q-text>
<input type="text" />
<
iframe
src="https://www.antdv.com/docs/vue/introduce-
1.简介 关于ifarem标签一般用于项目内外嵌页面。比如vue中经常会遇到外嵌页面的问题，但是有需求这样的 要求外嵌页面的内容保持
缓存
项目中一不小心点他其它页面 再次切换回来 防止页面外嵌页面再次刷新。
2关于
使用
keep-alive
缓存
不了
iframe
界面原因
很多人第一想法就是会
使用
keep-alive 去
实现
组件
缓存
，但是对
iframe
标签是行不通的，keepalive作为
缓存
组件这里不过多介绍，大多用于项目中 标签的嵌套
实现
出口视图页面的
缓存
。项目中可以发现keepalive包裹
协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则，超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器。
HTTP协议，即超文本传输协议(Hypertext transfer ...
开发程序遇到的最恐怖的事是什么？就是当你不了解一个东西，测试它的时候碰到了
缓存
。测试意味着我们要不断修改，但当你修改了文件(服务器端的)之后，然后刷新浏览器的时候，看到的却依然是原来的界面，不管怎么刷都没用，正当你郁闷的时候，不小心关了浏览器，再重新打开浏览器，输入了刚才的地址，却发现变了，你此时肯定有想砸电脑的冲动。可能你会说用ctrl+F5，不过下面的几种情况是你ctrl+F5也搞不定的。if...
