bug: vue, switching tabs back to previously visited tab pushes a new route

[MimyyK]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

When I navigate inside the tabs, my navigation history seems to be broken.

It happens when I use the mode="ios" on the <ion-router-outlet> and the swipe back gesture.

I have no errors in the DevTools console.

Expected Behavior

Be able to continue my navigation.

Steps to Reproduce

1 - Click on "level 1" button -> /tabs/tab1/level1
2 - Click on "level 2" button -> /tabs/tab1/level1/level2
3 - Click on "Tab 2" tab button -> /tabs/tab2
3 - Click on "Tab 1" tab button -> /tabs/tab1/level1/level2
4 - Swipe back -> /tabs/tab1/level1
5 - Swipe back -> /tabs/tab1/level1 (it should be /tabs/tab1)
6 - Try to click on "Level 1" button

Video to show the issue:
https://user-images.githubusercontent.com/1482715/158239494-29bf0532-3038-44ae-9300-22dc7d521665.mov

Code Reproduction URL

https://github.com/MimyyK/ionic-tabs-issue

Ionic Info

Ionic:

Ionic CLI : 6.18.2 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 6.0.11

Capacitor:

Capacitor CLI : 3.4.3
@capacitor/android : not installed
@capacitor/core : 3.4.3
@capacitor/ios : not installed

Utility:

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

System:

NodeJS : v16.13.0 (/usr/local/bin/node)
npm : 8.5.3
OS : macOS Monterey

Additional Information

No response

[liamdebeasi]

Thanks, I can reproduce this behavior.

The problem here is when we switch tabs back to a previously visited tab, we push a new route onto the stack. So in your application we have the following items inside of the Tab 1 stack before tapping Tab 2:

/tabs/tab1
/tabs/tab1/level1
/tabs/tab1/level2

After going to Tab 2 and then tapping Tab 1 again, we now have the following in the Tab 1 stack:

/tabs/tab1
/tabs/tab1/level1
/tabs/tab1/level2
/tabs/tab1/level2

From here, going back updates the /tabs/tab1/level1 route info to record that the "previous route" was /tabs/tab1/level2. Attempting to go back again causes the router to not do anything as there is no /tabs/tab1/level2 route that appears before /tabs/tab1/level1 in the Tab 1 stack.

[liamdebeasi]

Part of the fix here is to do the following in https://github.com/ionic-team/ionic-framework/blob/main/packages/vue-router/src/router.ts#L431:

router.go(routeInfo.position - currentHistoryPosition);

Due to #24859, this is causing the ion-back-button to disappear when going back. #24859 should be resolved first.

[liamdebeasi]

Hey there, I wanted to provide a quick update. The underlying issue for this bug is the same as #24303.

I am currently working on a fix for this, but I am going to merge this thread with #24303. Any future updates will be provided on that thread. Thanks!

[MimyyK]

Hi! Thanks for the update ! I will follow this issue ^^

[ionitron-bot]

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.