How to create a button link to a tab

Hi everyone,

Very nice that Ionic is now officially released for Vue, great work!

I have implemented tabs. One tab is ‘explore’ and another one is ‘favourites’. When there are no favourites yet, I have created a button that I want to link in such a way that the explore tab is opened. I couldn’t get it to work properly. The ‘explore’ page is opened in the ‘favourites’ tab…

The button

<router-link :to="{ 'name': 'explore'}">explore</router-link>

The tabs

      <ion-tabs>
        <ion-tab-bar slot="bottom">
          <ion-tab-button tab="explore" href="/explore">
            <ion-icon :icon="map" />
            <ion-label>Explore</ion-label>
          </ion-tab-button>

          <ion-tab-button tab="favourites" href="/favourites">
            <ion-icon :icon="heart" />
            <ion-label>Favs</ion-label>
          </ion-tab-button>

          <div class="fab-spacer"></div>

          <ion-tab-button tab="search" href="/search">
            <ion-icon :icon="search" />
            <ion-label>Search</ion-label>
          </ion-tab-button>

          <ion-tab-button tab="profile" href="/profile">
            <ion-icon :icon="person" />
            <ion-label>Prefs</ion-label>
          </ion-tab-button>
        </ion-tab-bar>
      </ion-tabs>

The routes

const routes = [
  {
    path: '/',
    component: Tabs,
    children: [
      {
        path: '',
        redirect: 'explore'
      },
      {
        name: 'explore',
        path: 'explore',
        component: () => import('@/views/Explore.vue'),
      },
      {
        name: 'favourites',
        path: 'favourites',
        component: () => import('@/views/Favourites.vue'),
      },
      {
        name: 'search',
        path: 'search',
        component: () => import('@/views/Search.vue')
      },
      {
        name: 'profile',
        path: 'profile',
        component: () => import('@/views/Profile.vue')
      },
    ]
  }
]

Any ideas?

1 post - 1 participant

Read full topic