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)

[tigohenryschultz]

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)

This seems like something I fixed in this pull request: #24433
The tabs using another ion-router-outlet seems funky but I was able to have them play nicely.

[maelp]

Seems the bug was for another reason and I fixed it :)

[Cannonb4ll]

@maelp

What was the fix you've used?

[maelp]

If I remember, the issue was that I was calling a method that did not exist when the user clicked on some route in the app, and after fixing this, the router started working normally again :)

[jreviews]

Having exactly the same issue as @RobinHavre with ionic v6.0.3. Thanks so much for posting your workaround. The only thing that works for me is using MemoryHistory. I am not using tabs and I have ion-page on every page.

[migo315]

Since I am also affected (v6.0.3) I have tried for a long time to find and solve this without success. In my opinion, a major bug. Any Ionic Vue app with at least 3 level is basically affected and has navigation that "freezes" at some point.

Since I couldn't find a solution either, I now have to switch to the MemoryHistory as well (which then of course create new problems).

[alons182]

Same here...
my app has more than 3 level and the navigation freezes. The temporary solution is to switch to MemoryHistory

[tigohenryschultz]

I've refactored quite a bit of the ionic/vue routing code here but it is for version 5.9.x. If you guys could give that a whirl. I'm no longer getting this issue.

#24433

[jreviews]

It happens for me with just 2 levels: list and detail. Swiping to go back breaks the navigation.

[liamdebeasi]

Hi there,

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

npm install @ionic/vue@6.0.5-dev.1643648206.702d97c @ionic/vue-router@6.0.5-dev.1643648206.702d97c

I tested this dev build on the app in #23873 (comment) and verified that the issue no longer reproduces. (Though additional testing is always appreciated 😄 )

---

For some added context, this issue happens when using default-href on ion-back-button to go back to a page that had previously not existed. If you are not using default-href but running into the same behavior as described in this thread, please create a new issue. The issue you are running into is related to a different problem and needs to be triaged separately.

For anyone interested in why this problem was happening, please see the comment I added in the related PR: https://github.com/ionic-team/ionic-framework/pull/24670/files

[migo315]

Thanks for the fix. I will test it this weekend. :-)

[alons182]

Hi @liamdebeasi
I tried it and it seems that the error is fixed... but in an application that uses sidemenu the error reappears when I click on a menu item and then navigate through the buttons. I don't know if it is related to the same issues
I leave you some examples

from Home Page (menu item)

from List Page (No menu Item)

[liamdebeasi]

Do you have a GitHub repo I can take a look at?

[alons182]

Do you have a GitHub repo I can take a look at?

Yes... here https://github.com/alons182/sidemenutest

[Cannonb4ll]

@liamdebeasi I have tested this in my app with a side menu as well, I don't get the same error @alons182 has with a side menu. I will do some more testing to see whether it comes back.

What I did in the side menu by the way was replace:

router-direction="root" :router-link="p.url"

With:

@click="$router.replace(p.url)"

[liamdebeasi]

Thanks for testing! I resolved those issues and added a new dev build to #23873 (comment).

Mind giving it another test?

npm install @ionic/vue@6.0.5-dev.1643648206.702d97c @ionic/vue-router@6.0.5-dev.1643648206.702d97c

[Cannonb4ll]

Just did a thoroughly test and it seems completely resolved for me now.

[alons182]

Everything seems to be working fine now

[jreviews]

Just tested as well and I am no longer getting the error. Many thanks for your efforts @liamdebeasi

[liamdebeasi]

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

Thank you very much to everyone who helped test and provide feedback! We appreciate your patience as we worked to resolve this issue.

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