Ionic-framework: bug: Vue routing in tabs mode cause re-render

[xar]

Bug Report

Ionic version:
[x] 4.4

Current behavior:
Simple tabs structure in vue project with ionic vue router. When I switch tab previous component is removed from DOM and after that It needs to be fully re-rendered when I go back to that tab. It's reproducible also on ionic-vue-conference app. But working correctly on ionic-conference-app.

Expected behavior:
Component doesn't get removed but will be hidden.

Steps to reproduce:

Related code:

<ion-tabs>
    <ion-tab tab="dashboard">
        <!--                <DashboardIndex />-->
        <ion-vue-router name="dashboard" />
    </ion-tab>
    <ion-tab tab="benefits" :routes="['page2']">
        <ion-vue-router name="page2" />
    </ion-tab>
    <ion-tab tab="results" :routes="['page3']">
        <ion-vue-router name="page3" />
    </ion-tab>
    <ion-tab tab="profile" :routes="['page4']">
        <ion-vue-router name="page4" />
    </ion-tab>
    <template slot="bottom">
        <ion-tab-bar :key="1">
            <ion-tab-button v-for="tab in tabs" :key="tab.routeName" :tab="tab.routeName">
                <ion-label>{{ tab.title }}</ion-label>
                <ion-icon name="home"></ion-icon>
            </ion-tab-button>
        </ion-tab-bar>
    </template>
</ion-tabs>

[michaeltintiuc]

@xar what's the behaviour if the contents of the tabs are not ion-vue-router elements but a Vue component or simple HTML instead?

[michaeltintiuc]

@xar if you look closely, the contents of the router are now an empty comment, this is due to the fact that the router renders an empty node as it did not match the route you're currently on, this is ultimately an issue with the Vue router, you can save it's state though by doing this:

    <ion-tab tab="home" :routes="['tabs.home']">
      <keep-alive>
        <router-view name="home" />
      </keep-alive>
    </ion-tab>

1. Using router-view instead of ion-vue-router
2. Wrapping the above in keep-alive

The reason for switching to router-view is due to a hard requirement of the transition element being the parent of keep-alive as per the docs. Unfortunately this is what is powering ionic transitions in Vue.

[xar]

@michaeltintiuc aa, you are correct. I understand now. In the end I have used router-view and probably will end making some ionic like transitions other way

[michaeltintiuc]

I'll be working towards enabling keep-alive support for ionic-vue-router it is a nice feature to have

[michaeltintiuc]

I totally forgot to mention the PR here, it's been open for quite a few days now ;)
https://github.com/ionic-team/ionic/pull/18561

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!