Ionic 5 Vue 2 Tabs White Screens in router Hash mode

Ionic Framework
1

Having a weird issue.
I have some tabs on my app in Ionic Vue - this is previous version of Ionic Vue (2) - NOT the new Beta version with Vue 3.
My tabs work fine when I have router in History mode - however as soon as I put them into Hash mode the second and third tabs are completely white if I click on them. I can see that the UI elements are there because I can hover over them and my cursor changes if it goes over where button should be for example - its just that nothing is appearing. This happens right after I log in.

Example Code:
Tab 3 in tabroot.vue:

<ion-tab tab="profile" :routes="['profile', 'change-email', 'edit-user-details']" id="profile">
       <ion-vue-router name="profileRoute"></ion-vue-router>
 </ion-tab>
...
<ion-tab-button v-if="auth" tab="profile" :to="{name:'profile'}">
       <ion-icon :src="i.person"></ion-icon>
      <ion-label>Profile</ion-label>
</ion-tab-button>

In my router index.js:

{
        path: 'profile',
        components: {
          profileRoute: () => import('@/views/Profile.vue')
        },
        name: 'profile'
},

which is inside the children array of ‘/tabs’.

As mentioned if I set it to this with mode: history everything works perfectly:

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

but if I set it to this (in other words include # in URLs), it does not - I get that white screen issue:

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

I need the hash as its just a lot simpler to deploy to github pages as a web app using the # in the URLs.

I based my code off of @aaronksaunders : https://github.com/aaronksaunders/ionic4-vue-tabs/blob/1ac5290a483a1cc97a47a0afddb3f4df97220609/src/main.js

As far as I can see my code is identical except for the mode being hash instead of history…

Any ideas!!? Is it just a bug with the old version - Should I just bite the bullet and move to new Vue 3 version?

2

migrate… you will be much happier because you are going to continue to run into issues

1 Like