Vue router keep iframe dom element (just hide, don't destroy)

Question

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

Some views contain subcomponents that render iframes.

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.

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>

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

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.

I have multiple levels of nested routes. The iframes are on the 2nd level. A simplified example: routes: [{component: Master, children: [{path: '/iframe', component: IFrameContainerComponent}]}] — Thomas Praxl

Fernando Reis Guimaraes Fernando Reis Guimaraes · Accepted Answer · 2018-07-18T15:50:55

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... 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 router keep iframe dom element (just hide, don't destroy)

1 Answers