将 iframe 内容保存在 vue 组件中

Question

问题是关于如何在Vue的组件中维护iframe的内容和状态，无论组件是显示还是隐藏。

我尝试了两种方法：

(1) 配合vue-router使用keep-alive

<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 内容并将其缓存在本地存储中。