Routable Tabs with unloadTabContent

Hello, I am getting an unexpected result with the back button when trying to implement routable tabs with unloadTabContet=false.

Using version 3.6.5

Expected behavior:

  1. Main page -> Link to Tab page
  2. Tab page loads.
  3. switch from tab1 to tab2 and return again to tab1.
  4. Back button should return to main page as routable tabs are not altering history.

Current behavior:

  1. Main page -> Link to Tab page
  2. Tab page loads.
  3. switch from tab1 to tab2 and return again to tab1.
  4. Back button change the url but Tab page keeps open.

Need more details, better example or JSFiddle, as i can’t replicate the issue

Thank’s for your reply Vladimir, I have identified from my test that the router problem happens when I use this combination, Tabs [routable, swipeable] and Async in the routes of the tabs as the next code show.

{
    path: '/tabs/',
    tabs: [
      {
        path: '/',
        id: 'tab-1',
        async (routeTo, routeFrom, resolve, reject) {
          const vueComponent = () => import('./pages/tab1.vue')
          vueComponent().then(vc => resolve({ component: vc.default }))
        },
      },
      {
        path: '/history/',
        id: 'tab-2',
        async (routeTo, routeFrom, resolve, reject) {
          const vueComponent = () => import('./pages/tab2.vue')
          vueComponent().then(vc => resolve({ component: vc.default }))
        },
      },

The error of back in history happens after swiping between tabs and then pressing back.
If instead of Async I put the components imported before, it works as expected.

The code is here and the live demo is here.

@nolimits4web should I open an issue in the repository since I could replicate the problem?

Yes, would be great if you can open issue on GitHub