How to set default tab

Ionic Framework
1

Hello everyone! I am building a simple tabs navigation and I am trying to set the default tab.

I read in the docs that I should use the selectedTab attribute in the ionic-tab-bar, but it does not seem to work.

This is my routes tree:

  {
    path: "",
    component: LayoutComponent,
    children: [
      {
        path: "page1",
        children: PAGE1_ROUTES
      },
      {
        path: "page2",
        children: PAGE2_ROUTES
      },
      {
        path: "page3",
        children: PAGE3_ROUTES
      }
    ]
  }

And here is my Layout component:


<ion-router-outlet></ion-router-outlet>

<ion-tabs>
  <ion-tab-bar selectedTab="page2" class="bottom-navigation" slot="bottom">
    <ion-tab-button tab="page1">
      <ion-icon name="options" class="icon"></ion-icon>
      <ion-label class="label">Page 1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="page2">
      <ion-icon src="/assets/icons/~" class="icon"></ion-icon>
      <ion-label class="label">Page 2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="page3">
      <ion-icon src="/assets/icons/~" class="icon"></ion-icon>
      <ion-label class="label">Page 3</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

I want Page2 to be loaded when the app starts. Any idea how to achieve it?

Thank you!

2

Try this.

{
    path: "",
    children: [
      {
        path: "page1",
        children: PAGE1_ROUTES
      },
      {
        path: "",
        children: PAGE2_ROUTES
      },
      {
        path: "page3",
        children: PAGE3_ROUTES
      }
    ]
  }
3

or try this :

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      { path: 'home', loadChildren: '../home/home.module#HomePageModule' },
      { path: 'panier', loadChildren: '../panier/panier.module#PanierPageModule' },
      { path: 'menu', loadChildren: '../menu/menu.module#MenuPageModule' },
      { path: 'promo', loadChildren: '../promo/promo.module#PromoPageModule' },
      { path: 'account', loadChildren: '../account/account.module#AccountPageModule' },
      
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/menu',
    pathMatch: 'full'
  }
 
];

video : https://www.youtube.com/watch?v=_BnCRIZ1nDk&t

4

It does not work @crmontiel.

5

It didn’t work @Anarxy. I tried this though:

export const APP_ROUTES: Routes = [
  {
    path: '',
    redirectTo: '/page2',
    pathMatch: 'full'
  },
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: 'page1',
        children: PAGE1_ROUTES
      },
      {
        path: 'page2',
        children: PAGE2_ROUTES
      },
      {
        path: 'page3',
        children: PAGE3_ROUTES
      }
    ]
  }
];

And it seems to work, but now navigation is broken. Pressing the tabs does not change the page.

6

Oh, I watched the video. @Anarxy I think you meant this:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      { path: 'panier', loadChildren: '../panier/panier.module#PanierPageModule' },
      { path: 'default', loadChildren: '../menu/default.module#DefaultPageModule' },
      { path: 'promo', loadChildren: '../promo/promo.module#PromoPageModule' }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/default',
    pathMatch: 'full'
  }
 
];

It works perfectly! Thank you very much!

2 Likes