Ionic 4 Vue JS tabs

Ionic Framework
1

Hi, I’m trying to get the Tabs component to work in Vue JS. I’m having difficuilty in getting the click to work to take me to another page. I’ve followed the documentation https://beta.ionicframework.com/docs/api/tab on tabs and have attached a href to the <ion-tab> element, the href is showing when I inspect the element by it’s not taking me to that page. This is a snippet of my code:

            <ion-tabs>
              <ion-tab label="schedule" icon="calendar" name="tab-schedule" href="#/tenants/dashboard">
                <ion-nav></ion-nav>
              </ion-tab>
              <ion-tab label="speakers" icon="contacts" name="tab-speaker">
                <ion-nav></ion-nav>
              </ion-tab>
              <ion-tab label="map" icon="map" component="page-map"></ion-tab>
              <ion-tab label="about" icon="information-circle" component="page-about"></ion-tab>
            </ion-tabs>

I’ve tried the href with and without a hashtag, and with/without a forward slash.

Any ideas?

1 Like
2

still not 100% there but it is a start

1 Like
3

Looks like you have a mix of pure javascript and vue router stuff. It’s hard to tell how this works since only the first tab actually shows a page. Would love to see this fleshed out a bit.

4

i will take a look at the new vue support being merged in to Ionic and see if it is made any clearer

5

Hi! Have you managed to take a look at this yet? Looks like you’re almost there with it so would be great to see it with additional pages added to the tabs.

6

Hi, i followed this example and it works for the first route, but clicking on a tab doesn’t seem to trigger the href to change the url.
Did you manage to proceed with that?

7

you jus have to import the components

example