vue.js - Vue router 保留 iframe dom 元素(只是隐藏，不要破坏)

Question

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

一些 View 包含呈现 iframe 的子组件。

当我切换到另一条路线并返回到呈现 iframe 的路线时，相应的 iframe 被重新加载，即使它之前被访问过。这种行为是不需要的，因为在这种情况下它会导致糟糕的用户体验。当用户返回 View 时，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>

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