bug: ionic/vue router issue with tabs: after second route change in a tab, cannot move outside of the tab route anymore

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
• Nightly

Current Behavior

Given a project with the following routing structure:

/start 
/tabs/:id (children below)
  /tab1
  /tab1/view1
  /tab1/view2

When navigating as follows: (1) /start -> (2) /tabs/test/tab1 -> (3) /tabs/test/tab1/view1 -> (4) /tabs/test/tab1/view2 -> (4) /start on the last navigation step to (4)/start, the route is changed in the browser, but the app does not show the correct content, i.e. does not render.

Expected Behavior

after step (4) render content for /start route.

Steps to Reproduce

Full minimal example here: https://github.com/CarstenRuetz/IonicRoutingIssue

Code Reproduction URL

https://github.com/CarstenRuetz/IonicRoutingIssue

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module ‘@capacitor/ios/package’

   Require stack:
   - /usr/local/lib/node_modules/@ionic/cli/lib/project/index.js
   - /usr/local/lib/node_modules/@ionic/cli/lib/index.js
   - /usr/local/lib/node_modules/@ionic/cli/index.js
   - /usr/local/lib/node_modules/@ionic/cli/bin/ionic

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module ‘@capacitor/android/package’

   Require stack:
   - /usr/local/lib/node_modules/@ionic/cli/lib/project/index.js
   - /usr/local/lib/node_modules/@ionic/cli/lib/index.js
   - /usr/local/lib/node_modules/@ionic/cli/index.js
   - /usr/local/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 6.20.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 6.3.7

Capacitor:

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

Utility:

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

System:

NodeJS : v16.17.1 (/usr/bin/node) npm : 8.15.0 OS : Linux 5.15

Additional Information

Additional information

• there is no message in the javascript console
• taking out any single one of the navigation steps 1-4 before moving back to /start does not show any problem: correct content is rendered
• taking out the variable :id in the route, i.e. just creating a fixed route like /tabs/XX/ makes the issue disappear
• moving the :id in front of the child routes like :id/tab1, :id/tab1/view1 makes the issue disappear (but that creates a new problem: in the Tab Component, the :id variable cannot be read from the route using useRoute() because that function can only be used in setup() which has already been called before navigating to an individual child route. Hence the :id variable is not accessible at the right time).
• switching from router-links to code navigation with ionRouter.push/navigate/… makes no difference
• browsers history seems to be set correctly on each step

Debug results so far: The issue only appears with a parent route that contains a variable and in a navigation series that contains two moves within the children routes.

[liamdebeasi]

Thanks for the report. Did you push your changes? I only see the Ionic tabs starter application.

[CarstenRuetz]

solved with workaround