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

user_1214722 0
Viewed 9369

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!

ionic2 ionic3 ionic-framework angular typescript
5 Answers

So i did this to fix in latest angular and ionic

 <ion-tab-button (click)="appointments()" tab="appointments">

And our appointments() function in ts is:

appointments(): void {                  
  this.router.navigate(['/customer/appointments']);
}

Pretty simple, we just route on our needed page, and no this weird last page opened.

user_131963360
user_67989580

Try this:

this.navCtrl.goBack();//for ionic 4
this.navCtrl.pop(); //ionic 3

As pop or goback would pop out the last visted page out of the stack

user_107640220
Related