Ionic Tabs not removing query parameters when navigating to other pages and back


I have an ionic app with some tabs. I am navigating to one of the tabs using an a tag:

<a [routerLink]="['/tabs/home']" [queryParams]="{id:}">

The above takes me to the a url like ‘/tabs/home?id=2’. However, when I click on the tabs and navigate to other tabs like profile or more, then I click on the home tab again it navigates me to ‘/tabs/home?id=2’ instead of ‘/tabs/home’. I do not understand why the query parameter is still persisting and not removed. Any help would be appreciated.


<ion-tabs class="footer-tabs" color="transparent">
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home-outline"></ion-icon>

    <ion-tab-button tab="profile">
      <ion-icon name="person-outline"></ion-icon>

    <ion-tab-button tab="more">
      <ion-icon name="list-outline"></ion-icon>


const routes: Routes = [
    path: '',
    component: TabsPage,
    children: [
        path: 'home',
        loadChildren: () =>
          import('../home-tab/home.module').then((m) => m.HomePageModule),
        path: 'profile',
        loadChildren: () =>
          import('../profile-tab/profile.module').then((m) => m.ProfilePageModule),
        path: 'more',
        loadChildren: () =>
          import('../more-tab/more.module').then((m) => m.MorePageModule),
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full',


You can add a query param in the tab property so that it restarts when you press it.

See this:

How to automatically add a query parameter when clicking an ion-tab?

I hope help you.

Answered By – rugo

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published