问题描述
我正在使用 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 元素(只是隐藏,不要破坏)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!