Vue.js <iframe>保持活动

Question

我有一个带有2个iframe的简单Vue.js应用。

使用Vue Router，我想在两个iframe之间切换，但是我想将iframe保持在“活动状态”，因此不需要每次都重新加载iframe。

知道为什么下面的小提琴无效吗？（请注意，每次您来回切换时，它都会重新加载iframe）

http://jsfiddle.net/c3umtepz/1/

<div id="app">
  <router-link to="/">/youtube.com</router-link>
  <router-link to="/foo">/adobe.com</router-link>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</div>

Answer 1

Keep-alive 在这里不起作用，您的解决方案v-show才是正确的

keep-alive的原理就是将组件中的节点信息保存在VNode中（内存中），并在需要渲染时从VNode渲染到真实的DOM上。iframe页面中的内容不属于节点的信息，所以使用keep-alive仍然会重新渲染iframe中的内容