离子路由器 - 非线性路由

Question

我正在为 Android 编写 Vue3 + Ionic 应用程序，并且有一些选项卡。我想为每个选项卡维护不同的导航堆栈，因此当用户单击某些视图上的后退按钮时，他们将始终保留在当前选项卡上。 这是文档：https://ionicframework.com/docs/vue/navigation#non-linear-routing 我没能实现这个目标。

这是我的路由器：

import { createRouter, createWebHistory } from '@ionic/vue-router'
import type { RouteRecordRaw } from 'vue-router'
import AppTabs from '@/components/AppTabs.vue'
import RecipeView from '@/views/RecipeView/RecipeView.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/tabs/home'
  },
  {
    path: '/tabs/',
    component: AppTabs,
    children: [
      {
        path: '',
        redirect: '/tabs/home'
      },
      {
        path: 'home',
        component: () => import('@/layout/HomeTab.vue'),
        children: [
          {
            path: '',
            component: () => import('@/views/HomeView.vue'),
          },
          {
            path: 'recipes',
            component: () => import('@/views/RecipesView.vue')
          },
          {
            path: 'recipe/:id?',
            component: RecipeView
          },
          {
            path: 'categories',
            component: () => import('@/views/CategoriesView.vue')
          },
          {
            path: 'addRecipeStep1',
            component: () => import('@/views/AddRecipe/AddRecipeStep1.vue')
          },
          {
            path: 'addRecipeStep2',
            component: () => import('@/views/AddRecipe/AddRecipeStep2/AddRecipeStep2.vue')
          },
        ]
      },
      {
        path: 'collections',
        component: () => import('@/layout/CollectionTab.vue'),
        children: [
          {
            path: '',
            component: () => import('@/views/CollectionsView.vue'),
          },
        ]
      },
      {
        path: 'groceries',
        component: () => import('@/views/GroceriesView.vue')
      },
      {
        path: 'settings',
        component: () => import('@/views/SettingsView.vue')
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

选项卡组件：

<script setup lang="ts">
import {
  IonTabBar,
  IonTabButton,
  IonTabs,
  IonLabel,
  IonIcon,
  IonPage,
  IonRouterOutlet,
} from '@ionic/vue'
import { clipboardOutline, settingsOutline, restaurantOutline, bookmarkOutline } from 'ionicons/icons'

</script>

<template>
  <IonPage>
    <ion-tabs>
      <ion-router-outlet></ion-router-outlet>
      <IonTabBar slot="bottom" class="tab-bar">
        <ion-tab-button tab="home" href="/tabs/home">
          <IonIcon :icon="restaurantOutline" />
          <IonLabel>Home</IonLabel>
        </ion-tab-button>


        <ion-tab-button tab="collections" href="/tabs/collections">
          <IonIcon :icon="bookmarkOutline" />
          <IonLabel>Collections</IonLabel>
        </ion-tab-button>

        <ion-tab-button tab="groceries" href="/tabs/groceries">
          <IonIcon :icon="clipboardOutline" />
          <IonLabel>Groceries</IonLabel>
        </ion-tab-button>

        <ion-tab-button tab="settings" href="/tabs/settings">
          <IonIcon :icon="settingsOutline" />
          <IonLabel>Settings</IonLabel>
        </ion-tab-button>
      </IonTabBar>
    </ion-tabs>
  </IonPage>
</template>

这是主页选项卡：

<script setup lang="ts">
import { IonPage, IonRouterOutlet } from '@ionic/vue';
</script>

<template>
    <IonPage>
        <div class="home-tab">
            <IonRouterOutlet />
        </div>
    </IonPage>
</template>

我尝试在每个选项卡中使用不同的

IonRouterOutlet

，但此流程仍然不起作用：

1. 我转到“主页”选项卡中的某些嵌套路线
2. 切换到收藏选项卡
3. 返回主页选项卡
4. 我确实在“主页”选项卡中看到了我访问的最后一个页面，但单击“后退”(

   ionRouter.back()

   ) 会将我带到“集合”选项卡，而不是之前的“主页”选项卡堆栈。

Answer 1

由于这个问题，我设法找到了解决方案：https://github.com/ionic-team/ionic-framework/issues/25213 使用

ion-back-button

有效。