我有一个带有Vue3的Ionic 6应用程序。我在我的应用程序中使用标签组件。
我的App.vue如下

<template>
      <ion-app>
        <ion-router-outlet />
      </ion-app>
    </template>

我有一个选项卡页面MemberPage.vue，如下所示，其中有一个Header组件来动态显示路由名称

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>{{ route.name }}</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-tabs v-if="member_profile">
      <ion-router-outlet></ion-router-outlet>
      <ion-tab-bar slot="bottom" color="primary">
        <ion-tab-button :tab="tab.name" :href="tab.path" v-for="tab in member_tabs" :key="tab.name">
          <ion-icon aria-hidden="true" :icon="tab.icon" />
          <ion-label>{{ tab.name }}</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

我有单独的页为制表符路线与下列结构的组成部分

<template>
  <ion-page>
    <ion-content v-if="dataLoaded">
      some other components
    </ion-content>
  </ion-page>
</template>

使用上面的代码，工具栏标题不会出现在应用程序中，并且还注意到标签太靠近设备的圆角并被剪切，如下图所示。
我该如何解决这个问题？
标题在Android应用程序中正确显示。我已经把应用程序进行了试飞，并检查了物理iOS设备以及，因此不是一个问题，模拟器以及。