Ionic4.x new page tabs at the bottom

1 , create tab4 module

 

ionic g page tab4

 

2 , modified root directory app-routing.module.ts file inside the routing configuration, remove the default route increased

3 , tabs.router.module.ts the new route

 

{
path: 'tab4', loadChildren: '../tab4/tab4.module#Tab4PageModule'
}

 

. 4 , tabs.page.html the new bottom tab switch button

 

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="flash"></ion-icon>
      <ion-label>Tab One</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="send"></ion-icon>
      <ion-label>Tab Three</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab4">
      <ion-icon name="settings"></ion-icon>
      <ion-label>Tab four</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>