bug: Launching app in tab child route breaks tab navigation

[andvaranaut]

Prerequisites

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

Ionic Framework Version

Tested in v7.4.0 (Stackblitz) and v8.2.2 (locally)

Current Behavior

Opening a Vue tab project from a URL which does not match the root of the corresponding tab breaks navigation in unexpected ways. In particular, it makes the subpage act in some ways as the root of the navigation for the tab, breaking user experience.

I have been able to reliably reproduce the issue both from a blank starter and in Stackblitz. I'm attaching a link to a Stackblitz environment (forked from the Ionic Vue tabs starter) which demonstrates it.

As stated in the Ionic docs, the correct way to create a subpage in a tabbed app is to create a sibling route under it (eg. in the Ionic starter, /tabs/tab1 is the root for the first tab, so a suitable sibling route might be /tabs/tab1/sub). When starting the application from anywhere else than the sibling route, everything works fine (for the most part). You can navigate from /tabs/tab1 to /tabs/tab1/sub using a router-link. If you navigate away from the first tab and back, you remain in the subpage. And you can go back to /tabs/tab1 by clicking on the first tab, or by clicking on the Back button.

However, when the application is started from the sibling route (that is, if you open it by navigating to eg. www.myapp.com/tabs/tab1/sub), while the first render is correct (the sibling route comes up and the parent tab is selected) most of the navigation involving the tab is broken. There are concrete examples in the "Steps to Reproduce" below.

Expected Behavior

Navigating the app while starting it from a subpage route (steps 4-8 below) should mimic the user experience as navigating starting from the main page (step 2 below).

Steps to Reproduce

1. Open the linked Stackblitz project. It adds a subpage (home/sub) to the first tab in the Ionic starter, and a router-link from the first tab to the subpage.
2. Verify that tab navigation works as expected. Eg. verify that clicking on the Subpage link brings it up, that clicking the Listen now tab icon navigates back to the root, and that the same page (main Listen now or the subpage) is shown when you navigate away and back. (NOTE: ion-back-button seems to be broken under Stackblitz, so you can't see that it's working it in the attached case, but it does work if you reproduce it in a local starter project).
3. Now, open the project from the subpage URL. In Stackblitz, write /home/sub a the end of the URL in the preview (after the webcontainer.io part) and press Enter/reload. Verify that the subpage comes up and the main tab is shown as selected (which is correct).
4. Click on Listen now. The page reloads (breaking UX) and again comes up in the subpage, instead of going back to the main Listen now page.
5. Now click eg. in Radio, then again in Listen now. The main Listen now page comes up (instead of the subpage).
6. Click on Subpage, then click again in Listen now. The click does nothing.
7. Click a second time in Listen now, same as in 4 happens.
8. Also, no back button is shown in the subpage (again, you can't see that in Stackblitz). This makes sense as ion-back-button is router based, but it would be nice if it was intelligent enough to know that the back route for a subpage should be the parent page.

Code Reproduction URL

https://stackblitz.com/edit/kqr8aj?file=src%2Frouter.ts

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/home/cepe/.nvm/versions/node/v22.1.0/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 8.2.2

Capacitor:

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

Utility:

cordova-res (update available: 0.15.4) : 0.15.2 native-run : 2.0.1

System:

NodeJS : v22.1.0 (/home/cepe/.nvm/versions/node/v22.1.0/bin/node) npm : 10.7.0 OS : Linux 5.15

Additional Information

No response