时间戳

首页 > 解决方案 > Ionic Vue 3 应用程序从另一个选项卡切换选项卡

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

问题描述

我创建了一个 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.jsionic-frameworkvue-composition-api

解决方案

是的，如果您可以访问 Vue-Router，那么您绝对可以进行编程路由，因为 ionic 在引擎盖下使用 Vue 路由器进行导航，并且由于选项卡是顶级导航，您可以简单地 在按钮单击或绑定设置函数内部调用$router.pushOR $router.replace标签使用router-link

这是 Ionic 与Navigation/Routing Link相关的文档，我认为这就是您正在寻找的访问 Ionrouter Instance Link

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

直接取自文档链接，正如您在模板中看到的那样，Ion-Button一个简单@click的用于推送您希望导航的路由，而在 script 标签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>

相同的链接还显示了您如何router-link使用Ion-Button

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

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

推荐阅读