How can I keep iframes alive in the background?

Question

I have a simple Vue.js app with 2 iframes.

Using Vue Router I'd like to switch between the two iframes, but I'd like to keep the iframes "alive" in the background, so it doesn't need to reload the iframe each time.

Any idea why the following fiddle doesn't work? (notice that it reloads the iframes each time you switch back and forth)

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 doesn't work here, your solution with v-show is only right

The keep-alive principle is to keep the node information in the component in VNode (in memory) and render from VNode to real DOM when rendering is needed. The content in the iframe page does not belong to the information of the node, so using keep-alive will still re-render the content in the iframe