Ionic Vue 3 应用程序从另一个选项卡切换选项卡

Question

我已经创建了一个 ionic vue 3 选项卡入门应用程序。我正在尝试以编程方式将选项卡从一个选项卡切换到另一个选项卡

这是我的情况

// in Tab1.vue page
setup(props, context) {
 function moveToTab3(){
      // here I need the code to switch tab1 to tab3
      // possible to call tabs.select() method here ?
    }
  }

// my Tabs.vue page
<ion-tabs ref="tabs" >

我在ionic文档和vue文档中搜索了如何从子组件获取父组件，我还没有找到解决方案。非常感谢任何帮助，非常感谢

Answer 1

是的，如果您有权访问 Vue-Router，您绝对可以执行该编程路由，因为引擎盖下的 ionic 使用 Vue 路由器进行导航，并且由于选项卡是顶级导航，您可以简单地调用 $router.push 或 $router.replace 在您的设置函数中单击按钮或使用 router-link

绑定选项卡

这是 Ionic 与 Navigation/Routing Link 相关的文档我想这就是您要找的 访问 Ionrouter 实例 Link

=====更新=====

直接取自文档 Link，如您在 Ion-Button 上的模板中所见，一个简单的 @click 用于推送您希望导航的路线，而在脚本中标记 useRouter 从核心 vue-router 访问以访问底层路由器

<template>
  <ion-page>
    <ion-content>
      <ion-button @click="() => router.push('/detail')">Go to detail</ion-button>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
  import { IonButton, IonContent, IonPage } from '@ionic/vue';
  import { defineComponent } from 'vue';
  import { useRouter } from 'vue-router';

  export default defineComponent({
    name: 'HomePage',
    components: {
      IonButton, 
      IonContent, 
      IonPage
    },
    setup() {
      const router = useRouter();
      return { router };
    }
  })
</script>

相同的 link 还显示了您如何在 Ion-Button

上使用 router-link

<ion-button router-link="/detail">Go to detail</ion-button>

无需使用方法..无论哪种方式，都有效...

Ionic Vue 3 应用程序从另一个选项卡切换选项卡

Ionic Vue 3 application switch tab from another tab

ionic-framework

vue.js

vue-composition-api