Ionic 7求助：ion-back-button在Android设备不显示但浏览器正常

问题场景 #

在Ionic 7应用中，从home.page跳转到包含子页面a、b、c的tabs.page后，子页面工具栏内的ion-back-button在浏览器中正常显示，但在Android设备上完全无法出现。已排查页面结构、标签页配置及路由文件，未发现明显问题。

相关代码示例 #

标签页子页面（a/b/c.page.html） #

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>Gruppe</ion-title>
  </ion-toolbar>
</ion-header>

tabs.page.html #

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="a">
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="b">
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="c">
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

app.routes.ts #

export const routes: Routes = [
  {
    path: 'home',
    component: HomePage,
  },
  {
    path: 'tabs/:id',
    component: TabsPage,
    children: [
      {
        path: 'a',
        component: APage,
      },
      {
        path: 'b',
        component: BPage
      },
      {
        path: 'c',
        component: CPage
      },
      {
        path: "",
        redirectTo: 'a',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: "",
    redirectTo: 'home',
    pathMatch: 'full',
  }
];

问题原因 #

Ionic的ion-back-button会依据路由导航栈自动判断显示状态，在标签页子页面的场景下，Android设备上Ionic会默认隐藏该按钮，这是平台特定的行为差异，导致浏览器与Android设备显示不一致。

解决方法 #

替换ion-back-button为带routerLink的普通ion-button，手动指定返回路径，示例代码如下：

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-button routerLink="/home">
        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Gruppe</ion-title>
  </ion-toolbar>
</ion-header>

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