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

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]

Hey there, I wanted to provide a quick update. The underlying issue for this bug is the same as https://github.com/ionic-team/ionic-framework/issues/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!

[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 https://github.com/ionic-team/ionic-framework/issues/24859, this is causing the ion-back-button to disappear when going back. #24859 should be resolved first.