bug: Back button does not work after switching between tabs

[har0ke]

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

v7.x

Current Behavior

I have the following routes in my vue project that is using tabs:

tab1
   child1 
       child2
tab2
tab3

After the navigating through tab1/ -> tab1/child1/ -> tab1/child1/child2/ -> tab1/child1/ (back button) -> tab2/ (via tab2 button) -> tab1/child1/ (via tab1 button), the back button does nothing. Only after clicking the back button it a second time, I get navigated back to tab1/

sr.webm

Expected Behavior

After the navigating through tab1/ -> tab1/child1/ -> tab1/child1/child2/ -> tab1/child1/ (back button) -> tab2/ (via tab2 button) -> tab1/child1/ (via tab1 button), the back button should navigate the application to tab1/

Steps to Reproduce

1. Clone the reproduction repository and serve it to a browser with ionic serve
2. Navigate tab1/ -> tab1/child1/ -> tab1/child1/child2/ -> tab1/child1/ (back button) -> tab2/ (via tab2 button) -> tab1/child1/ (via tab1 button)
3. Hit the back button (which does nothing)

Code Reproduction URL

https://github.com/har0ke/ionic-tabs-example

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/usr/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 7.5.2

Capacitor:

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

Utility:

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

System:

NodeJS : v20.8.1 (/usr/bin/node)
npm : 10.2.1
OS : Linux 6.5

Additional Information

No response

[har0ke]

I would be willing to look into this issue. After initial investigation I have a feeling that when pressing the back button the first time (when it is working), the locationHistory is not updated correctly, because of a missing call to locationHistory.add in handleHistoryChange. After adding such a call (conditionally) the problem seems resolved.

But then again, I do not understand enough of the vue-router codebase and how the locationHistory should look like, to make any code contributions at the moment. Is there any documentation on the locationHistory other than in the source code?

FIY: There are also some similar issues regarding the vue-router (most notable #25213). In my opinion, this is a bit different from all issues I found.

[liamdebeasi]

Thanks for the issue. I am going to close this as a duplicate of #25213. The root issue is the same as #25213 since the histories are not being preserved when switching across tabs.

locationHistory is internal so we do not have public documentation. However, the goal of this is to create stack-based navigation. The locationHistory variable is the main linear history (similar to the browser's history). And then tabsHistory holds the history for each tab. I believe the problem here is in tabsHistory where entries are either being duplicated or removed incorrectly. I hope this clarified things a bit. Let me know if you have any additional questions.

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