Ion Tabs路由问题：Angular跳转页面后标签栏消失的排查与解决

在Angular+Ionic的应用中，使用Ion Tabs组件包含home标签页，点击home页内卡片项跳转到携带指定ID的user-trainer-view页面时，跳转完成后Ion Tabs标签栏消失。

当前导航实现代码：

goToUserTrainerView(id: any) {
  this.router.navigate(['/tabs/user-trainer-view', id]);
}

路由配置（tabs.module.ts）：

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

import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        loadChildren: () =>
          import('../trainers/home/home.module').then((m) => m.HomePageModule),
      },
      {
        path: 'trainer-user-view/:id',
        loadChildren: () => import('../trainers/user-trainer-view/user-trainer-view.module').then((m) => m.UserTrainerViewPageModule),
      }
    ],

  },
  {
    path: '',
    redirectTo: 'tabs/home',
    pathMatch: 'full',
  }
];

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

HomePage.html代码：

<ion-header [translucent]="true">
  <!-- Header content here -->
</ion-header>

<ion-content [fullscreen]="true">
  <div class="flexTemplate" style="overflow: scroll;">
    <h3 class="textTitle">Your subscribers</h3>

    <div #cards>
      <ion-card *ngFor="let cardData of cardDataArray"
        (click)="goToUserTrainerView(cardData.id)" class="userCard">
        <div class="pholderImg" style="margin-left: 5px;">
          <img src="{{cardData.imgUri}}">
        </div>
        <ion-card-header>
          <ion-card-title>{{cardData.username}}</ion-card-title>
        </ion-card-header>
      </ion-card>
    </div>
  </div>
</ion-content>

问题原因 #

路由配置与导航路径不匹配：

• 路由配置中定义的子路由路径是trainer-user-view/:id
• 但导航时使用的路径是/tabs/user-trainer-view，路径名称（user-trainer-view vs trainer-user-view）不一致，导致实际跳转没有匹配到TabsPage的子路由，页面被加载到Tabs组件外部，因此标签栏消失。

解决方案 #

方案1：修正导航路径，匹配路由配置 #

将导航代码中的路径改为与路由配置一致的名称：

goToUserTrainerView(id: any) {
  this.router.navigate(['/tabs/trainer-user-view', id]);
}

方案2：修正路由配置，匹配导航路径 #

如果希望保持导航路径为user-trainer-view，则修改路由配置中的子路径：

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        loadChildren: () =>
          import('../trainers/home/home.module').then((m) => m.HomePageModule),
      },
      // 修改此处路径为user-trainer-view/:id
      {
        path: 'user-trainer-view/:id',
        loadChildren: () => import('../trainers/user-trainer-view/user-trainer-view.module').then((m) => m.UserTrainerViewPageModule),
      }
    ],
  },
  {
    path: '',
    redirectTo: 'tabs/home',
    pathMatch: 'full',
  }
];

额外检查 #

确保TabsPage的模板（tabs.page.html）中包含<ion-router-outlet>，只有这样，子路由的页面才会加载到Tabs组件内部，标签栏才会保持可见：

<ion-tabs>
  <!-- 标签栏按钮配置 -->
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>
    <!-- 其他标签按钮 -->
  </ion-tab-bar>

  <!-- 子路由页面渲染出口 -->
  <ion-router-outlet></ion-router-outlet>
</ion-tabs>

内容的提问来源于stack exchange，提问作者Conta