Router replace changes behavior / stops working

Hello. I am essentially using buttons at the top of my app like tabs where each one does router.replace(). They work fine going to each other however when I go to one “tab” and then another page inside that tab which uses router.push() and then back to the root of that tab it does not like going to another tab. Its like it almost does push instead of replace.

Here is what the top buttons look like:

<ion-toolbar class="page-toolbar">
        <ion-buttons slot="start" v-if="showBack">
            <ion-back-button
                text=""
                :icon="arrowBack">
            </ion-back-button>
        </ion-buttons>

        <ion-buttons slot="start" v-if="!showBack">
            <ion-button v-bind:class="active === 'home' ? 'active' : ''" fill="clear" @click="router.replace('/home')">
                <ion-icon class="home"></ion-icon>
            </ion-button>
        </ion-buttons>

        <ion-buttons slot="primary" v-if="!showBack && $root.user">
            <ion-button v-bind:class="active === 'user-profile' ? 'active' : ''" fill="clear" @click="router.replace('/user-profile?root=true')">
                <ion-icon class="profile"></ion-icon>
            </ion-button>
            <ion-button fill="clear">
                <ion-icon class="settings"></ion-icon>
            </ion-button>
        </ion-buttons>

        <ion-buttons slot="primary" v-if="!showBack && !$root.user">
            <ion-button  @click="router.push('/login')" fill="clear">
                <ion-icon class="profile"></ion-icon>
            </ion-button>
        </ion-buttons>

        <ion-title></ion-title>
    </ion-toolbar>

So essentially starts on /home button/tab. Clicks on profile it does router.replace('/user-profile'). User then clicks on a link inside of the user profile and that does router.push('/build') which essentially pushes another page with a back button. Then click back and are taken back to the user profile. Then if they click Home it does router.replace('/home') but its treating it like a push not a replace. I can tell by the animation and it shows a back button and then I cannot go anywhere. Its fine if i click between the home and profile “tabs” but once I go into another sub page and go back it breaks. I have tried just about everything.

I have tried to use <router-link replace> instead of manually with the @click router replace but that did not change the behavior. I don’t know if this is an ionic issue or a vue issue.

1 post - 1 participant

Read full topic