bug: Vue routing in tabs mode cause re-render

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]

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

[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