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

Posted 2023-02-22

【中文标题】Vue路由器保留iframe dom元素（只是隐藏，不要破坏）

【英文标题】：Vue router keep iframe dom element (just hide, don't destroy)

【发布时间】：2018-06-08 08:38:59

【问题描述】：

我正在使用 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？允许隐藏而不是交换组件的路由器模式将是完美的。

【问题讨论】：

你只有一层嵌套路由吗？

我有多层嵌套路由。 iframe 位于第二层。一个简化的例子：routes: [component: Master, children: [path: '/iframe', component: IFrameContainerComponent]]

【参考方案1】：

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

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

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

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

【讨论】：

对于这个具体的项目，问题的解决方案对我来说不再重要。但无论如何，谢谢。也许github.com/LinusBorg/portal-vue 可以帮助类似的用例，但我自己没有尝试过，它可能有同样的问题（销毁/创建）。