Ionic 4/Angular Router - how to route to a tab via a button/item?

Ionic Framework
21

{ path: ‘’, loadChildren: ‘./login/login.module#LoginPageModule’ },
{ path: ‘’, loadChildren: ‘./tabs/tabs.module#TabsPageModule’ },
{ path: ‘tabs’, loadChildren: ‘./tabs/tabs.module#TabsPageModule’ }

this worked for me just add a blank route before tabs

1 Like
22

Maybe a little late but anyway:

you can use the regular navigation method but in the app-routing.module.ts you have to add a redirect

const routes: Routes = [
{ path: ‘’, loadChildren: ‘./tabs/tabs.module#TabsPageModule’ },
{ path: ‘prov/:id’, redirectTo: ‘/tabs/tab2/:id’, pathMatch: ‘full’ },
{ path: ‘dist/:id’, redirectTo: ‘/tabs/tab3/:id’, pathMatch: ‘full’ }
];

In this way, if you navigate to (prov/:id) you will be redirected to the tab2.
All the magic of lazy load is performed by the router module in tabs. Here you have to add the parameter :id

{
path: ‘tab2/:id’,
children: [
{
path: ‘’,
loadChildren: ‘…/tab2/tab2.module#Tab2PageModule’
}
]
},
Of course, this only if you plan to pass a parameter