Ionic Tabs 在导航到其他页面和返回时不删除查询参数

Question

我有一个带有一些标签的离子应用程序。我正在使用标签导航到其中一个选项卡：

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

以上将我带到像 '/tabs/home?id=2' 这样的 url。但是，当我单击选项卡并导航到其他选项卡（如配置文件或更多）时，我再次单击主页选项卡，它会将我导航到 '/tabs/home?id=2' 而不是 '/tabs/home '。我不明白为什么查询参数仍然存在并且没有被删除。任何帮助将不胜感激。

tabs.html:

<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-label>Home</ion-label>
    </ion-tab-button>

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

    <ion-tab-button tab="more">
      <ion-icon name="list-outline"></ion-icon>
      <ion-label>More</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

标签路由：

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',
      },
    ],
  }
];

Answer 1

您可以在选项卡属性中添加一个查询参数，以便在您按下它时重新启动。

看这个：

Answer 2

试试这个。刚刚添加了“？”

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