将iframe内容保留在vue组件中

Question

问题在于无论显示或隐藏Vue组件时如何维护iframe的内容和状态。

我尝试了两种方法：

（1）结合使用keep-alive和vue-router

<keep-alive>
  <router-view>
    <Component></Component>
  </router-view>
</keep-alive>

（2）将其作为子组件，使用v-if代替vue-router显示和隐藏

<Component v-if="$store.state.isShow"></Component>

这两种方法都会保留组件的内容，但iframe仍会每次刷新，那么有什么方法可以隐藏和显示iframe？

一个类似的问题是Thomas question，他也使用vue-router方法并且没有解决问题，我同意Thomas的观点，即Vue仅保留组件的内容，而不保留iframe的内容。

非常感谢！

Answer 1

如果子组件方法适合您：

<Component v-if="$store.state.isShow"></Component>

然后稍加修改将使iframe不会因状态更改而刷新：

<Component v-show="$store.state.isShow"></Component>

请注意，这仅在路线保持不变的情况下起作用。

如果您实际上需要使用其他路由，并且刷新iframe的唯一问题是性能，则可以通过ajax加载iframe内容并将其缓存在本地存储中而摆脱困境。