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

Ionic Framework Ionic Vue
1

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
Like

Vue: :ionChange
Angular (ionChange)

Hopefully someone can help me.

Thanks in advance!

2

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

Theoretically that will just work.

3

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:

4

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: https://ionicframework.com/docs/developing/hardware-back-button#basic-usage

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

2 Likes
5

I will check it out. Thanks @ldebeasi

1 Like
6

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.