How to create a button link to a tab

Ionic Framework Ionic Vue
1

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?

2

try

<router-link path="/tabs/explore">explore</router-link>
3

Seems not the way to go

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Missing required prop: "to"
4

Can you share a bit more of what you’ve tried or provide sample app? router-link component shouldn’t really be needed here.

5

I made a sample app and it seems to work but it doesn’t all the way.

Sequence:
1 Open tab 2
2 Click ‘Link to tab 1 main page’
3 Click tab 3
4 Click tab 2, now you will see tab 1 is opened in tab 2
5 Click tab2 again and tab2 will open

any ideas?

6

I imported the project into Codesandbox I made made it work, if you have related question, please show issues in the project I created.

7

Hi, thanks for helping. I can’t point out the issue in the project since I can only point out the steps to recreate the issue.

Steps:
1 Open tab 2
2 Click ‘Link to tab 1 main page’
3 Click tab 3
4 Click tab 2, now you will see tab 1 is opened in tab 2
5 Click tab2 again and tab2 will open

Step 4 is incorrect, I expect that tab 2 opens straight away.

Any other ideas?

8

@gilbertsmink I am confused?? I fixed the issue in the project that is above… did you open and run the project?

9

Yes, I checked the Codesandbox and dont see how the problem is fixed.

Let me show you the problem with this video: https://streamable.com/vehebz

Do you see the issue the same as I see it?

Thanks so much for helping!

11

Seems like an actual issue, reported on Github: https://github.com/ionic-team/ionic-framework/issues/22389

12

I don’t think This is a bug

13

It got fixed: https://github.com/ionic-team/ionic-framework/issues/22307#issuecomment-718244083

:smiley: