Thanks for the issue. Can you reproduce this in an Ionic starter app and provide a link to the GitHub repo? I cannot reproduce this on my end.

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

@liamdebeasi I found same issue as well (I just think it is same issue).

Here is reproduction demo, use branch bug-4
https://github.com/MarekGogol/ionic-vue-bugs

1. open app, you will automatically be redirected to: /tabs/dashboard
2. click on "Go to settings tab" button
3. click on "Go to login page" button
4. click on "Go to dashboard tab" button
5. you will be on wrong route. You should be on Dashboard, but you will be in settings instead...

@liamdebeasi I have recreated the bug in the tabs demo project:
tabs-bug.zip
Steps to reproduce (2 methods) can be found in the readme.

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/vue@5.6.0-dev.202012102004.3dce446 @ionic/vue-router@5.6.0-dev.202012102004.3dce446

Not yet, no. Even on a tab page where a ion refresher is present, i can still see the previous tabs component in the background.
Correct state:

Broken state:

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.

Just as a heads up, I will be merging #22655 soon. The README for the repo in #22519 (comment) actually notes 2 different issues.

Method 1 is the issue listed in this thread (which will still exist after merging #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 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!

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

Our app is also stuck on this issue, so we are waiting... Thanks!

Happy Holidays :)

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 tried that latest build that @liamdebeasi provided but I still have issues when switching routes in Ionic Vue app. Here is example of my router:

{
  path    : '/',
  redirect: '/main/tab1',
  name    : 'Home',
},
{
  path     : '/signup',
  component: Signup,
  name     : 'Signup',
},
{
  path     : '/onboarding',
  component: Onboarding,
  name     : 'Onboarding',
},
{
  path     : '/main',
  component: Default,
  children : [
    {
      path    : '',
      redirect: '/main/tab1',
    },
    {
      path     : 'tab1',
      component: () => import('@/views/Tab1.vue'),
    },
    {
      path     : 'tab2',
      component: () => import('@/views/Tab2.vue'),
    }]
}

Ionic is not hiding content when switching from Onboarding -> Signup -> to any Tabs route(/main/*). When Switching from Onboarding to Signup, all is good, but when there is 3rd different main component in a sequence it doesn't hide content of middle one.

As you can see on image below, I manually added ion-page-hidden on selected ion-page div element. ion-page-hidden existed only on first ion-page div element (which is belonging to Onboarding screen).

Any suggestions how to fix this issue?

I found issue also.

If you are on Dashboard tab, which is active in ion-tab-bar. Then you go on other Tab2(Settings), which is not in ion-tab-bar element. Dashboard tab will contain active, also if is not. This will cause not working ion-tab-button when you want go back to Dashboard.

How to reproduce:

1. open app on default screen http://localhost:8100/tabs/dashboard
2. click on "Go to settings tab" button
3. Then click on "Dashboard" in bottom part of app (ion-tab-bar). You won't be redirected, because dashboard Tab is active, also if is not. This happens only if Settings ion-tab-button is missing in ion-tab-bar.

Branch bug-5
https://github.com/MarekGogol/ionic-vue-bugs

@MarekGogol The issue you are describing is something different: #22597. I plan on tackling that after the holidays.

edit: See #22597 (comment) for a temporary workaround.

@maleta Can you reproduce this in an Ionic starter app and provide a link to the repo? It's hard to fix the issue without being able to reproduce it myself.

@liamdebeasi I tried to reproduce this on tabs starter app but I couldn't do it. After comparing differences between starter router/components and router/components in my application the only difference was that my Tabs component didn't have <ion-page> tag while starter had it. After adding it back to my app it seems that everything work as expected.

There is no documentation on that tag and I removed it at some point earlier when I had this rendering issue first time. I will be adding more nested pages in further days, so I will update this issue if I encounter render issue again.

Btw, can you explain when should we use <ion-page>? If every view should have only 1 <ion-page> element, then why tabs example have <ion-page> in parent component and in child components tab1, tab2 or tab3?

We should have more documentation on ion-page, I agree. I will work on that. Any time you have a page you want to navigate to via the router you need to use ion-page.

Each view should have one ion-page element, but Tabs and Tab1 are separate views since Tabs renders a nested router outlet. Due to this, it is fine to have an ion-page in Tabs and an ion-page in Tab1.

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

1. I have prepared a PR for this fix at #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!

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! 😄

Thanks for the issue. This has been resolved via #22807, and a fix will be available in an upcoming release of Ionic Framework. I will be sure to update the docs when this fix ships.

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.