bug: vue, leaving and going back to a different tab causes new tab to not be shown

Bug Report

Ionic version: [x] 5.x

Current behavior: When navigating from view outside tabs, router will render wrong tab content.

Expected behavior: Ionic router should render the correct tab.

Steps to reproduce:

1. Clone this repo: https://github.com/HybridLab-Projects/ionic-vue-router-bug
2. Load both tabs content
3. Navigate from tab 1 to subpage and second subpage views
4. Click on button to redirect to tab 2 - URL will be tab 2 but rendered will be tab 1

Video of the issue https://imgur.com/8qPlJPe

Ionic info:

Ionic:

   Ionic CLI       : 6.13.1 (/home/jakub/.nvm/versions/node/v14.16.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.6.0

Capacitor:

   Capacitor CLI   : 2.4.7
   @capacitor/core : 2.4.7

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v14.16.0 (/home/jakub/.nvm/versions/node/v14.16.0/bin/node)
   npm    : 6.14.11
   OS     : Linux 4.19

[liamdebeasi]

Thanks! I think the bug that is happening in your app is actually https://github.com/ionic-team/ionic-framework/issues/22895. We fixed a similar issue in Ionic Angular and I started work on a fix for Ionic Vue.

[liamdebeasi]

Thanks for the issue. I discussed this issue with the team, and we realized that this is a use case that Ionic does not support.

The primary issue here is that the app in https://github.com/ionic-team/ionic-framework/issues/23058#issue-832947377 is programmatically switching between tabs. In a mobile app, each tab is treated as its own stack, and items in one stack never interact with items in another stack. This means that there should never be a link in Tab 1 that brings users to Tab 2. Another way of thinking about this is that the only way an app should switch between tabs is if a user presses a tab button (or uses the hardware back button).

In the case of the sample app, the app is going from Tab 1 to a non-tabs page and then to Tab 2. Even though there is a non-tabs page in the middle, the same rules apply for mobile tabs.

I understand that this may be unexpected as Ionic tabs behave very differently than tabs you may have seen in other web based UI libraries. The reason for this is that Ionic tries to match the behavior of native mobile tabs as closely as possible.

---

To help developers better understand these differences and to figure out how to account for these differences in their apps, we have updated our documentation with better explanations and demos: https://ionicframework.com/docs/vue/navigation#how-tabs-in-ionic-work

We understand tabs are a complex component and the behavior of mobile tabs may be a bit unexpected, so we are looking to expand on these docs in the future.

I am going to close this issue. Thank you!