[Ionic V4] Can you show an example of tabs nav

[Anthony2539]

Support Question

I have an application with 5 tabs [Home, Search, Map, Info, Tarif].
I can navigate to the Map page directly from tab menu without parameter but also from Home page i want to access Map page with parameter.
I don’t know how to define the route into the tabs.router.module.ts

This is my tabs.router.module.ts

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'search',
        outlet: 'search',
        component: SearchPage
      },
      {
        path: 'map',
        outlet: 'map',
        component: MapPage
      },
      {
        path: 'info',
        outlet: 'info',
        component: InfoPage
      },
      {
        path: 'tarif',
        outlet: 'tarif',
        component: TarifPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  },
  { 
    path: 'search',
    redirectTo: '/tabs/(search:search)',
    pathMatch: 'full'
  },
  {
    path: 'map',
    redirectTo: '/tabs/(map:map)',
    pathMatch: 'full'
  }
];

and my app.routing.module.ts

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule', canActivate: [AuthGuard] },
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule', canActivate: [AuthGuard] },
  { path: 'map', loadChildren: './pages/map/map.module#MapPageModule', canActivate: [AuthGuard] },
  { path: 'search', loadChildren: './pages/search/search.module#SearchPageModule', canActivate: [AuthGuard] },
  { path: 'station', loadChildren: './pages/station/station.module#StationPageModule', canActivate: [AuthGuard] },
  { path: 'info', loadChildren: './pages/info/info.module#InfoPageModule', canActivate: [AuthGuard] },
  { path: 'tarif', loadChildren: './pages/tarif/tarif.module#TarifPageModule', canActivate: [AuthGuard] }
];

to access Map page from Home page i use this:

goMap(){
    this.router.navigate(['map'], {queryParams: this.station});
  }

Thx for helping

[yuankunluo]

for lazing loading:

in my app-routing module:

`import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
`

This will lazy load a module called TabsPageModule located in ./tabs folder

Hier is how TabRoutingModule looks

`import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { TabsPage } from './tabs.page';
import { HomePage } from '../home/home.page';
import { AboutPage } from '../about/about.page';
import { ContactPage } from '../contact/contact.page';

const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: '',
redirectTo: '/tabs/(home:home)',
pathMatch: 'full',
},
{
path: 'home',
outlet: 'home',
component: HomePage
},
{
path: 'about',
outlet: 'about',
component: AboutPage
},
{
path: 'contact',
outlet: 'contact',
component: ContactPage
}
]
},
{
path: '',
redirectTo: '/tabs/(home:home)',
pathMatch: 'full'
}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
`

and tabs.page.html

<ion-tabs> <ion-tab label="Home" icon="home" href="/tabs/(home:home)"> <ion-router-outlet name="home"></ion-router-outlet> </ion-tab> <ion-tab label="About" icon="information-circle" href="/tabs/(about:about)"> <ion-router-outlet name="about"></ion-router-outlet> </ion-tab> <ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)"> <ion-router-outlet name="contact"></ion-router-outlet> </ion-tab> </ion-tabs>

[ionitron-bot]

Thanks for the issue! This issue appears to be a support request. We use this issue tracker exclusively for bug reports and feature requests. Please use our forum or our slack channel for questions about the framework.

Thank you for using Ionic!