Change Ionic Tabs to navigate to their root page and not to their last page

Issue

I am using the Ionic Tab Navigation

<ion-tabs #mainTabs>
  <ion-tab [root]="tab1" tabTitle="Page1" tabIcon="icon-tasks"></ion-tab>
  <ion-tab [root]="tab2" tabTitle="Page2" tabIcon="icon-calendar"></ion-tab>
  <ion-tab [root]="tab3" tabTitle="Page3" tabIcon="icon-profile"></ion-tab>
</ion-tabs>

And everything works okay with the exception that when I click on a tab it goes to the last visited page on that stack and not the root page of the stack.

For example:

Page1
  Subpage1 (root)
  Subpage2
  Subpage3 <-- Last visited page
Page2
Page3

If I am on the last visited page (Subpage3) then I touch on tab Page3 and then I touch on tab for Page1 it goes back to Subpage3 but I want it to go to Subpage1 which is root.

Thanks for your help!

Solution

Altenative approch on Ionic 5

.html

<ion-tabs (ionTabsDidChange)="setRootTab($event)">
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="schedule">
      <ion-icon name="calendar"></ion-icon>
      <ion-label>Schedule</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="speakers">
      <ion-icon name="person-circle"></ion-icon>
      <ion-label>Speakers</ion-label>
    </ion-tab-button>
 
</ion-tabs>

.ts

 setRootTab(event: any): void {
    switch (event?.tab) {
      case 'schedule':
           
          this.router.navigateByUrl('tabs/schedule');

        break;

      case 'speakers':
        this.router.navigateByUrl('tabs/speakers');

        break;

    

      default:
    }
  }

It is by Design

This is by design.In other words, Each individual ion-tab is a declarative component for a NavController.So if you push something to that tab's NavController, it remains there when you'll come back again to that Tab.

NavController is the base class for navigation controller components like Nav and Tab. You use navigation controllers to navigate to pages in your app. At a basic level, a navigation controller is an array of pages representing a particular history (of a Tab for example). This array can be manipulated to navigate throughout an app by pushing and popping pages or inserting and removing them at arbitrary locations in history.

Please see the Doc for more info.

Answered By - Sampath