Hi @liamdebeasi, I just tested the development builds with the reproduction projects & our own private project and the bugs are no longer present. We will be updating to 5.5.3 as soon as it is released and has passed internal testing.

Thank you for the swift communication and regular updates! 😄

Hi everyone, apologies for the delay. Here is the game plan for this fix:

1. I have prepared a PR for this fix at https://github.com/ionic-team/ionic-framework/pull/22807.
2. Due to the fix requiring a breaking change, the PR will support both the new child tab structure and the old child tab structure with a deprecation warning message in apps that use the old structure.
3. The old child tab structure will no longer be supported as of Ionic Vue v6.0.
4. I am planning to ship this fix in v5.5.3 next week.
5. As soon as this fix ships, I will update the tabs docs here: https://ionicframework.com/docs/vue/navigation#child-routes-within-tabs

Here is an updated dev build if anyone would like to test:

npm install @ionic/vue@5.6.0-dev.202101212235.f7a3c1d @ionic/vue-router@5.6.0-dev.202101212235.f7a3c1d

Please let me know if you have any questions. Thanks!

Hey everyone,

I had some time to look at this. The good news is I have a dev build that should fix the issue if anyone would like to test it out:

npm install @ionic/vue@5.6.0-dev.202012172118.e3a05bf @ionic/vue-router@5.6.0-dev.202012172118.e3a05bf

The less good/slightly confusing news is I think I gave some bad advice on how to add child routes in tabs on the docs: https://ionicframework.com/docs/vue/navigation#child-routes-within-tabs.

Previously, we discussed that most routes should be written with a shared URL configuration. The exception to this rule is when adding child routes to tabs.

This seems to be incorrect – most routes should be written with a shared URL, tab child pages included.

So if you have a routing structure that looks like this:

{
  path: '/tabs',
  component: Tabs,
  children: [
    { 
      path: '', 
      redirect: 'tab1'
    },
    { 
      path: 'tab1', 
      component: Tab1, 
      children: [
        {
          path: 'child-one', 
          component: Tab1ChildOne
        }
      ]
    }
  ]
}

It should really be written the way Vue Router normally does it, as a sibling route:

  path: '/tabs',
  component: Tabs,
  children: [
    { 
      path: '', 
      redirect: 'tab1'
    },
    { 
      path: 'tab1', 
      component: Tab1
    },
    {
      path: 'tab1/child-one',
      component: Tab1ChildOne
    }
  ]
}

If you have an app that uses the old child tab setup, you should switch it to the new setup. I am still trying to figure out the best way forward with this new approach (in terms of avoiding breaking changes), but ultimately I think the change is good because it means you can add new pages inside of a tab as you would in a regular Vue 3 app with Vue Router.

Let me know if you find any issues with the dev build. Thanks!

I plan on taking a look at this issue after the holidays.

Do you have an approximation of when you think this issue might be resolved? We are planning to release a product using Ionic Framework, but won’t be able to if this bug still affects our project. A possible bugfix deadline might give us some insight if we need to implement a temporary tabs navigation replacement.

I already wish you Happy Holidays and all the best to you in the year to come!

Just as a heads up, I will be merging https://github.com/ionic-team/ionic-framework/pull/22655 soon. The README for the repo in https://github.com/ionic-team/ionic-framework/issues/22519#issuecomment-729822379 actually notes 2 different issues.

Method 1 is the issue listed in this thread (which will still exist after merging https://github.com/ionic-team/ionic-framework/pull/22655).

Method 2 is a different issue resolved by the PR I linked. Once the PR is merged and shipped, this method should work fine. However, clicking the “Go home” button after following all of the steps will cause the Home page to not show up. This is not a regression, it is just this thread’s issue happening again.

I plan on taking a look at this issue after the holidays.

I have created a new project with steps to reproduce. While making this project I also found some strange behaviour that ‘fixes’ the issue, by playing around with the router entries: tabs-bug.zip The Readme contains the exact steps to reproduce.