Vue路由器保留iframe dom元素（只是隐藏，不要破坏）

Question

我正在使用 vue-router 3.0 开发 Vue 2.5 SPA。

某些视图包含渲染 iframe 的子组件。

当我切换到另一条路线并返回到呈现 iframe 的路线时，相应的 iframe 会重新加载，即使它之前已被访问过。这种行为是不受欢迎的，因为在这种情况下会导致糟糕的用户体验。当用户返回视图时，iframe 状态应保持与以前相同。

我猜想重新加载是由于离开路线时 dom 被破坏造成的。即使是以下结构也不能阻止它：

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

<keep-alive> 似乎让 Vue 组件本身保持活跃，但不是 dom 表示。

有什么方法（或解决方法）在切换路由时保持 dom？允许隐藏而不是交换组件的路由器模式将是完美的。

Answer 1

您需要在 iframe 上使用 v-show。 在路线上，您不会指定组件

<template>
    <iframe v-show="$route.path == '/foo'">
</template>

<script>
routes: [
        { path: '/foo'},
        { path: '/bar' }
    ]
</script>

ps...我正在寻找一种更优雅的方式来做到这一点...应该是路由器上的一个属性，告诉我们要隐藏，而不是破坏/重新创建