bug: ionic vue main outlet re-rendering tabs when leaving and going back to tabs

[goffincedric]

Bug Report

Ionic version:
[ ] 4.x
[x] 5.x

Current behavior:
Same behaviour as #21885, but with Vue 3.

Expected behavior:
Expect the first tab to redirect to the correct page/component instead of the initial redirected tab page.

Steps to reproduce:

1. Have a setup with a tabbar and multiple tabs, each tab-button having their own route (eg: tab1 = /tab1, tab2 = /tab2, tab3 = /tab3) and a component that does not use the tabbar (eg /home)
2. Start on a tab in the tab component (eg: /tab2),
3. Navigate out of the tab component (eg: /home)
4. Use the router to redirect to the link of a specific tab, that is not the first tab (eg: /tab3).
5. Observe that the wrong component is shown, and clicking the first tab doesn't redirect to the first tab.

Other information:
See issue: #21885

Ionic info:

Ionic:

   Ionic CLI       : 6.12.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.4.1

Capacitor:

   Capacitor CLI   : 2.4.2
   @capacitor/core : 2.4.2

Utility:

   cordova-res : 0.15.2
   native-run  : not installed

System:

   NodeJS : v12.16.1 (/usr/local/bin/node)
   npm    : 6.14.8
   OS     : macOS Big Sur

[liamdebeasi]

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.

[ionitron-bot]

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.

[MarekGogol]

@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...

[goffincedric]

@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.

[liamdebeasi]

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

[goffincedric]

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: