Changing route trough tabs from sub route cause back button to redirect to wrong route

Ionic Framework Ionic Vue
1

I have an ionic-vue app that uses vue-router. When I navigate to a subroute, from the subroute changing to another tab, then go back to the tab which has the subroute still active and then pressing the back button causes my route to change to the other tab, but the animation still does go to the main tab of the sub route.

Let me clear this through an example:

My routes:

const routes = [
  {
      path: '/',
      redirect: '/suite/ads'
  },
  {
      path: '/suite/',
      component: () => import('@/views/suite.vue'),
      redirect: 'suite/ads',
      children: [
        /* DEFAULT */
        {
            path: '',
            redirect: 'ads',
        },
        /* ALL ROUTES OF ADS */
        {
            path: 'ads',
            component: () => import('@/views/ads/ads.vue'),
            meta: {
                routeName: 'ads'
            }
        },
        {
            path: 'ads/ad',
            component: () => import('@/views/ads/ad.vue'),
            meta: {
                routeName: 'ads'
            }
        },
        /* ALL ROUTES OF SHOP */
        {
            path: 'shop',
            component: () => import('@/views/shop/shop.vue'),
            meta: {
                routeName: 'shop'
            }
        }
      ]
  }
];

Let’s say I start at the /suite/ads route. From there I navigate to /suite/ads/ad (which also creates a back button in this route). From there I go to the route /suite/shop (another tab!). From the /suite/shop I go back to the /suite/ads by pressing the ads tab. Doing this stil has the suite/ads/ad route active (which I would expect). When I then press the back button, my route (in the URL) goes back to /suite/shop but the view changes back to /suite/ads.

My suite component looks like this:

type or paste code here<template>
  <ion-page>
    <ion-tabs @ionTabsDidChange="changeCurrentRoute()">
      <ion-tab-bar>
        <ion-tab-button tab="ads" href="/suite/ads" selected>
          <ion-icon :icon="activeRoute === 'ads' ? tv : tvOutline" />
          <ion-label color="light">Advertenties</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="shop" href="/suite/shop">
          <ion-icon :icon="activeRoute === 'shop' ? bagHandle : bagHandleOutline" />
          <ion-label color="light">Shop</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

This seems like a bug? Or am I misunderstanding something here?

2

you have a lot going on here and there are pieces of code missing…

here is a sample codesandbox.io ionic vue tabs app, you can fork this template to reproduce the issue?

3

Hi,

Seems like the link is just a general codesandbox? Can’t see the tabs example?

4

Never mind Aaron. Already forked your github repo (vue-tabs 3).

5

Aaron,

Please check out this angry-villani-l9cbl - CodeSandbox.

Please click on the “go to subroute” button. then click on tab2, then click back to tab1 (which still has subroute active). And then click back button. You will see that the vue switches back to the tab 1 main view, but the url goes back to tab2…

6

i think this is a bug… you might want to post an issue in git hub

cc: @ldebeasi

1 Like
7

Thanks Aaron. Will do!

8

@ldebeasi I added github issue cc: @aaronksaunders

9

does it solved? and how?