Question: How to prevent back button on one specific page (VueJs)

Ionic 5 + Vue

How to prevent back button on one specific page.

I found this but no work the docs no implementation for vue.

this.platform.backButton.subscribe(() => {
//Do somthing

Also some docs for Angular is different implementation for vuejs

Vue: :ionChange
Angular (ionChange)

Hopefully someone can help me.

Thanks in advance!

Have you tried just the regular Vue router per route gaurd or in component gaurd?

Theoretically that will just work.

It cannot override the system back of android by using this using capacitor wrapper on web browser it working but using per route guard inside capacitor wrapper totally no work. :frowning:

Are you trying to control the behavior of the hardware back button in a Capacitor application with Ionic Vue? If so, we have usage docs on how to do that:

Be sure to click the “Vue” tab for Vue-specific instructions.


I will check it out. Thanks @ldebeasi

1 Like

This is tangential to the original question posed here. I have an app with only a few pages that are linear and I do not want the back button to be usable. I’ve had success using router.replace to prevent adding page changes to the navigation history. However, when I try doing this using a router-link within an ionic component, it doesn’t seem to work. Here’s an example:

<ion-button router-link="/Page2" replace expand="block">

Perhaps I’m missing something simple here. Otherwise, I’ll use the standard navigation guards if this isn’t supported or best practice.