Can't get tabs to work at all

[EdwardMillen]

Sorry if I'm missing something obvious here. I'm trying to add a tab bar to my app (based on Vue 2) for the first time, and I just can't get it to work at all. I've looked through all the other issues I could find here relating to tabs, and tried various bits of code from them and the examples referenced by them, but I'm not even getting as far as having the issues they've encountered.

I've tried putting the template code for the tabs in both App.vue and Home.vue separately, as I couldn't find anything that says where that code is supposed to go, but it doesn't seem to make much difference either way for me. For the actual <ion-tab-button>s, I've tried with just the tab attribute alone, with the :to attribute set to a named route, and I've even tried a normal href attribute.

Whichever way I try it, the tab I click does get highlighted in the tab bar, but the URL never changes at all and it doesn't actually load anything. No errors (or messages of any sort) are output in my Chrome dev console either. I think it is actually switching to the matching <ion-tab> element though, because I noticed in some of my experiments with changing the content of one of the <ion-tab> elements, it actually went blank when I selected that tab. And then I also found when I tried with a longer page, it actually remembered a different scroll position for each tab (even though each tab is still displaying the same originally-loaded page).

What am I missing here? Is there perhaps something I need to set to enable <ion-tab-button>s to actually navigate to another page?

Or is there a complete example of how to implement tabs with the current (Vue 2) version of ionic-vue? I noticed one of the issues mentioned a "Cookbook" page, but that doesn't seem to exist anymore. I've been using @modus/ionic-vue@1.3.10, but I've also just updated to 1.3.12 and re-tried everything mentioned above, with the same results.

[michaeltintiuc]

Hey @EdwardMillen , unfortunately tabs in the current version of ionic-vue aren't very straightforward to setup and indeed, the lack of examples doesn't help either. I'll whip up one shortly and let you know. But I think I'll be porting the implementation of the Vue3 version over. As I recall it the reason I implemented it that way was that ionTabButton didn't have an href attribute back then (ionic v4) but now it has and things got a lot easier with it's inclusion.

[EdwardMillen]

Thanks :) and yeah from what I've read about the Vue 3 version you've been working on, it does sound like that will be better overall anyway, so that being ported over sounds good to me. I'm just a bit stumped as to why I can't get it working at all in the meantime though, so an example for the current version would be great.

[aileksandar]

Here is my implementation if it can help.

routes.js file

import Vue from 'vue'
import {IonicVueRouter} from '@modus/ionic-vue'

import Tabs from '../views/Tabs'
import Tab1 from '../views/Tab1'
import Tab2 from '../views/Tab2'

Vue.use(IonicVueRouter)

const routes = [
  {
    path: '/',
    component: Tabs,
    children: [
      {
        path: 'tab1',
        name: 'tab1',
        components: {
          tab1: Tab1,
        }
      },
      {
        path: 'tab2',
        name: 'tab2',
        components: {
          tab1: Tab2
        }
      },
    ],
  },
  {
    path: '/',
    redirect: '/tab1'
  }
]

const router = new IonicVueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Tabs.vue

<template>
  <ion-tabs-vue>
    <ion-tab tab="tab1" :routes="['tab1']">
      <ion-vue-router name="tab1" :animated="animated"/>
    </ion-tab>
    <ion-tab tab="tab2" :routes="['tab2']">
      <ion-vue-router name="tab2" :animated="animated"/>
    </ion-tab>

    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="tab1" :to="{name: 'tab1', params: {animate: false}}">
        <ion-label>Tab1</ion-label>
      </ion-tab-button>
      <ion-tab-button tab="tab2" :to="{name: 'tab2', params: {animate: false}}">
        <ion-label>Tab2</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs-vue>
</template>

<script>

import {IonTabsVue} from '@modus/ionic-vue'

export default {
  components: {
    IonTabsVue
  },
  data: () => ({
    animated: true,
  }),
  beforeRouteUpdate(to, from, next) {
    this.animated = to.params.animate !== false
    return next()
  },
}
</script>

As you can see you need to import IonTabsVue and use it as a component so you can have access to :routes prop
In :routes prop you define the routes that should show the tab when you land on the url.

Also there is my "hack" for preventing router animation when switching from tab to tab, I'm passing animate param and setting animate prop on route update.

Known issues for this Vue2 version:

• No ios-like swipe back option
• Tab route state is not saved when switching from tab to tab

[EdwardMillen]

Aha! I've got it working now based on that example, thanks! :D

All the code I'd seen so far just used <ion-tabs> rather than <ion-tabs-vue> (and so didn't have the import etc either). Changing that has made it work in some way at least, so now I can experiment with the rest and hopefully get it working well enough to use for now until the better version is ported.

[aileksandar]

Glad you've got it to work. I've just realised that my example is tabbed navigation with routes, and that you've most probably wanted just a simple tabs example. In my mind when you say "Tabs" its "Tabbed mobile navigation", so sorry about that overkill :)

[michaeltintiuc]

Glad to hear that! Thanks @meoweloper btw!

[EdwardMillen]

@meoweloper it is for mobile navigation, but I wasn't sure exactly how I wanted it to work yet so just wanted to get the basics of it working first and then build on it from there. I've already found I needed to add the name attribute to the <ion-vue_router>s and add matching names to the components in the routes, to stop it loading multiple instances of each page at once, so your example was very useful for figuring that out too :)

So it's all working now, but I am definitely looking forward to the new version now that I can see the limitations of the current one (particularly the route state not being remembered for each tab, which I think I will need before my project can go fully live - but at least I can now build everything else in the meantime) :)