bug: vue, router-outlet not waiting for previous transition to finish

[mattsteve]

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

This may be related to #23873 but I'm not sure so I've logged it separately.

I can pretty easily do a set of router commands that breaks the router.

router.replace("page1");
// User wait for router animation to finish
router.push("page2");
// User wait for router animation to finish
router.go(-1);
setTimeout(() => {
    router.replace("page3");
}, 50);

Problem 1:

The code above breaks the page, so it appears no further route modification really does anything. I have an example project of this.

Problem 2:

For the last 2 commands, I can't just do this without a setTimeout and expect the router to obey. The router should listen to subsequent commands, but it does not. It stops modifying the route after router.go(-1) if the setTimeout is not in place.

router.go(-1);
router.replace("page3");

Expected Behavior

My app has a tab setup but whenever you click a tab it should pop the history stack to undo any history pushes that were done inside of a single tab.

Example:
"Tab 1" opens "Page 1". "Page 1" has a button you can click that pushes "Page 2" to the router history.
"Tab 2" opens "Page 3", but in order to do so it must go back in the history 1 step to undo the "Page 2" push, then replace the "Page 1" history state with "Page 3".
This way, tapping on "Tab 2" no matter where you have previously navigated in the application results in the same history state as if you had tapped on it from just starting the application.

Steps to Reproduce

git clone https://github.com/mattsteve/ionic-vue-router-go-broken
npm install
npm run serve

Visit localhost:8080.

When the app starts it should be on Page 1. Click the "Go to next page" button.

At the bottom of the screen click the "Page 3" button.

Now at the bottom of the screen, click the "Page 1" button.

The URL changes, but you are not visually routed to Page 1.

Code Reproduction URL

https://github.com/mattsteve/ionic-vue-router-go-broken

Ionic Info

Ionic:

   Ionic CLI : 5.4.16

Utility:

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

System:

   NodeJS : v12.16.1
   npm    : 6.13.4
   OS     : Linux 5.3


  ────────────────────────────────────────────────────────────

           Ionic CLI update available: 5.4.16 → 6.7.0
                                
     The package name has changed from ionic to @ionic/cli!
                                
             To update, run: npm uninstall -g ionic
                 Then run: npm i -g @ionic/cli

  ────────────────────────────────────────────────────────────

Additional Information

No response

[tigohenryschultz]

I hope this is related to: #23873 (comment)

Happy to test for you once you have a test package ready to install @liamdebeasi

[liamdebeasi]

@mattsteve Can you give the following dev build a try and let me know if it fixes the issue?

npm install @ionic/vue@6.0.1-dev.1641582126.a28787c @ionic/vue-router@6.0.1-dev.1641582126.a28787c

[mattsteve]

It's definitely better in the scenario I mentioned. I'm testing on our original app, if I keep clicking around eventually it can break. It's difficult to pin down exactly why.

In one scenario, I've found a case where I click the back button and it does nothing (except update the URL), then it's in that broken state again where no matter what I click to navigate away all it does is update the URL.

However this isn't consistent, I'm not sure what exact state leads up to this.

I'm also finding sometimes it attempts to completely refresh the page, for some reason though I'm serving on localhost:8081 it redirects to localhost:8080 where nothing is being served.

[mattsteve]

For the scenario where it refreshes the page, this seems this consistently trigger it:
.replace
.push
.pop (via ion-back-button)
.replace

...or not. It was doing that for a while. I don't know why it's so erratic.

It seems to mostly work but if I keep clicking and going through a ton of pages eventually something breaks. Like the back button as described above.

[liamdebeasi]

Thanks for testing. This sounds like either #23873 or #24432. We are also looking into those two, so I can keep you in the loop when we have dev builds for those.