bug: routing breaks after specific sequence of navigations and clicking on ion-back-button

[luxterful]

Prequisites

• 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

After following a specific order of navigation steps the ion-back-button changes the path but the back animation does not happen and the view stays the same.

Expected Behavior

The ion-back-button should trigger the animation and change the view

Steps to Reproduce

Create a blank ionic vue project and create 3 views.

Add those Views to the router and redirect root to view 2

The views have buttons to go to the next view
View 1 -> View 2 -> View 3

The views also have an ion-back-button.

The App starts on view 2

1. go to view 3
2. go back
3. go back
4. go to view 2
5. go to view 3
6. go back
7. go back

Now the URL shows the path to view 1 but the last animation did not happen and we are still on view 2

Code Reproduction URL

https://github.com/luxterful/ionic-back-routing-issue

Ionic Info

Ionic:

Ionic CLI : 6.16.3 (/home/lukas/.nvm/versions/node/v14.16.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 5.7.0

Capacitor:

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

Utility:

cordova-res : 0.15.3
native-run : 1.4.1

System:

NodeJS : v14.16.1 (/home/lukas/.nvm/versions/node/v14.16.1/bin/node)
npm : 7.11.2
OS : Linux 5.8

Additional Information

No response

[stevearagonsite]

I have the same issue and try many ways to force update but doesn't execute, the event router end trigger without any error.

[tigohenryschultz]

I'm running into the issue, quite a big bug in my opinion. I can't seem to figure out what causes it/reliably reproduce it.

I am on 5.8.5 too

[obnijnil]

Having the same issue, and it's happening occasionally, including not going back when clicking the ion-back-button and not going forward when calling Vue router's router.replace().
Have to kill the app or reload the url in the browser to make it navigate properly.

I'm using @ionic/vue 5.8.5, vue 3.2.21 and vue-router 4.0.12.

[scottix]

We are on 5.9.1 and running into an issue that sounds very similar to this, that is getting stuck on a page randomly when navigating in the app.

It is causing a blocker in our deployment, any idea of a fix?

[RobinHavre]

We are experiencing the same issue, and for us it's been a pain through all of 5.x and now also on all the RC's for Ionic 6

[RobinHavre]

As said this bug (or something very similar) has been a pain for us both in v5.x and in v6 RC 0 through 3.

The most important observation is that this bug is only produced when we are navigating using ion-back-button or using router-link together with router-direction="root".

We have found three workarounds, both of which prevents the bug from happening, but each having their own caveats.

1. Override the default ion-back-button-behavior.
This resolves the ion-back-button from triggering the bug (but does nothing for router-link).
Example:

<ion-back-button :default-href="defaultHref" @click.prevent="navigateBack()"></ion-back-button>

function navigateBack() {
  router.go(-1);
}

2. Use MemoryHistory instead of WebHistory
This seems to resolve both bugs with the navigation breaking, but we would really like to keep using WebHistory.

const router = createRouter({
  // history: createWebHistory(process.env.BASE_URL),
  history: createMemoryHistory(process.env.BASE_URL),
  routes
})

3. Use WebHashHistory instead of WebHistory
This seems to resolve the bugs with router-link, but does not help with <ion-back-button>

const router = createRouter({
  // history: createWebHistory(process.env.BASE_URL),
  history: createWebHashHistory(process.env.BASE_URL),
  routes
})

These are hacks we are using temporarily, while waiting for the issue to be resolved.

[maelp]

I have the same issue with VueJS, it seems that createMemoryHistory solves it, but then the back button in the browser no longer works, and createWebHashHistory does not seem to fix the bug

[maelp]

As a reference I rewrote my VueJS app to use a single ion-router-outlet, and still this happens. There is sometimes a bug with a missing element (undefined) that Ionic tries to set classList to, and then the router stops working (leavingEl is because leavingViewItem.ionPageElement is undefined)