Ion-back-button prevent back function [ionic 7]

Ionic Framework Ionic Angular
1

Hi,
I want to present the default back button from routing and call my own function instead.
How is that possible in ionic 7?

Thank you for your help!

2

I actually had this same question and was on my list to figure out. I am a Vue guy so pardon my Vue syntax, but it looks like you can add your own click event to the IonBackButton and prevent the event from bubbling up.

This is what I just tested and appears to work:

<IonButtons>
    <IonBackButton
        :default-href="backButtonDefaultUrl"
        @click.prevent="console.log('custom click')"
    />
</IonButtons>
1 Like
3

What do you use for the defaultHref URL?
This kinda does not seem to be working for me.

4

Sorry, backButtonDefaultUrl is a variable that is set to a valid route string.

1 Like
5

Ok. Thank you. If I want the route to not change, what should I use?

6

If you want the button to always go somewhere specific, then you don’t need the defaultHref.

Any specific reason you are reaching for IonBackButton over a standard IonButton? With IonButton you’ll have full control over it. The only advantage to using the IonBackButton is that it changes the icon for you based on if you are on iOS or Android.

If you are going to continue using IonBackButton, I believe the only way to override where it goes upon click, is to override the click event as I mentioned above.

1 Like
7

Yeah, you’re right. Thank you very much!
This works and I am probably better off with the ion-button anyway.
I was just using it for the styling and the icon change on iOS and Android, because I cannot get the IonButton to look the same.