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

【问题标题】：Ionic Vue 3 application switch tab from another tabIonic Vue 3 应用程序从另一个选项卡切换选项卡
【发布时间】：2021-08-11 12:15:25
【问题描述】：

我创建了一个 ionic vue 3 tabs starter 应用程序。我试图以编程方式将选项卡从一个选项卡切换到另一个选项卡

这是我的情况

// 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 docs 和 vue docs 中搜索了如何从子组件中获取父组件，但我还没有找到解决方案。非常感谢任何帮助，非常感谢您

【问题讨论】：

标签： vue.js ionic-framework vue-composition-api

【解决方案1】：

是的，如果您可以访问 Vue-Router，那么您绝对可以进行编程路由，因为 ionic 底层使用 Vue 路由器进行导航，并且由于选项卡是顶级导航，您可以简单地调用 $router.push 或 $router.replace 在设置功能内单击按钮或使用 router-link 绑定选项卡

这是来自 Ionic 的与 导航/路由 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>

同一链接还显示了您如何在 Ion-Button 上使用 router-link

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

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

【讨论】：