bug: vue, replacing routes can cause replacement to happen 2x

[outdoorfish]

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

sometimes back button not work

Expected Behavior

back button working

Steps to Reproduce

issue 1

1. click Go To Sub Page (push) /a -> /sub/1
2. click sub2 (replace) /sub/1 -> /sub/2
3. click back button (not work)

issue 2

1. click tab button /a -> /b
2. click tab button /b -> /a
3. click Go To Sub Page (push) /a -> /sub/1
4. click sub2 (replace) /sub/1 -> /sub/2
5. click back button (work) /sub/2 -> /a
6. click Go To Sub Page (push) /a -> /sub/1
7. click sub2 (replace) /sub/1 -> /sub/2
8. click back button (not work)

2022-03-31.11.33.40.mov

2022-03-31.11.34.16.mov

Code Reproduction URL

https://github.com/outdoorfish/ionic-back-button-issue

Ionic Info

Ionic:

Ionic CLI : 6.18.1

Utility:

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

System:

NodeJS : v14.16.0
npm : 6.14.11
OS : macOS Big Sur

Additional Information

No response

[liamdebeasi]

Thanks for the issue. The problem here is that we are internally performing the replace operation twice when going to sub/2.

This logic handles wiping the future history when replacing: https://github.com/ionic-team/ionic-framework/blob/main/packages/vue-router/src/router.ts#L374-L375

But in the case of sub/2, there is extra logic in the locationHistory.add method that causes the route to get replaced again: https://github.com/ionic-team/ionic-framework/blob/main/packages/vue-router/src/locationHistory.ts#L9-L11

The result is that we lose the previous route history. Now that we are using clearHistory we should probably remove this automatic replacing logic in locationHistory.add.

[liamdebeasi]

Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/[email protected] @ionic/[email protected]

[outdoorfish]

thanks, it resolve this issue

but i found another problem

1. click tab button /a -> /b
2. click Go To Sub Page (push) /b -> /sub/1
3. click sub2 (replace) /sub/1 -> /sub/2
4. click router-link (push) /sub/2 -> /a

route path "/a" is correct, but ion-page display "/b"

2022-04-22.2.18.42.mov

[Jannik-KJ]

I'm also still facing an issue with the new build that you posted @liamdebeasi
The console is showing: Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'e.mount=!1').

My flow is:

1. TAB1 -> push child page (TAB1/CHILD)
2. click TAB2
3. click TAB1 twice to go to parent page
4. click TAB2
5. click TAB1
6. push child page again (TAB1/CHILD)
7. click TAB2
8. click TAB1 twice to go to parent page
9. click TAB2 -> CRASH

[liamdebeasi]

@outdoorfish Thanks for testing! I can reproduce this behavior. However, I can reproduce this behavior with the latest version of Ionic, so this does not appear to be caused by the dev build.

Additionally, navigating across tabs is an anti-pattern and not something we support. Tabs are design to be individual stacks that do not interact, so going from Tab A to Tab B programmatically is not something developers should do in their app (even if there's additional redirects in there).

Another way to think of this: Tabs should only be switched by a user pressing a tab button in the tab bar.

---

@Jannik-KJ This does not sound related to the issue described on this thread. Can you open a separate issue?

[Jannik-KJ]

@liamdebeasi Ah okay sorry, think it relates to this then #24303
Thought they were somehow connected

[liamdebeasi]

Thanks for the issue. This has been resolved via #25171, and a fix will be available in an upcoming release of Ionic Framework.

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