Vue 路由器保留 iframe dom 元素(只是隐藏，不要破坏) [英] Vue router keep iframe dom element (just hide, don't destroy)

问题描述

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

I'm developing a Vue 2.5 SPA using vue-router 3.0.

某些视图包含呈现 iframe 的子组件.

Some views contain subcomponents that render iframes.

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

When I switch to another route and return to a route that renders an iframe, the respective iframe is reloaded, even if it was visited before. This behavior is unwanted because it results in a bad UX in that case. The iframe state shall remain the same as before, when the user returns to the view.

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

I guess the reloading is caused by the dom being destroyed when leaving the route. Even the following structure doesn't prevent it:

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

似乎使 Vue 组件本身保持活动状态，但不是 dom 表示.

<keep-alive> seems to keep the Vue component itself alive, but not the dom representation.

有什么方法(或解决方法)可以在切换路由时保持 dom?允许隐藏而不是交换组件的路由器模式将是完美的.

Is there any way (or workaround) to keep the dom when switching routes? A router-mode that would allow for hiding instead of swapping the components would be perfect.

推荐答案

您需要在 iframe 上使用 v-show.在路由上，你不会指定组件

You will need to use a v-show on your iframe. On route, you will not specify the component

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

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

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

p.s... i'm looking for a more elegant way to do that... should be a property on router to tell that we want to hide, not destructed/recreated

这篇关于Vue 路由器保留 iframe dom 元素(只是隐藏，不要破坏)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！