How to handle android back button on webview in nativescript vue

Question

So in nativescript-vue, I have a webview and users can go through the pages in that. But when they press the physical back button, the app exits instead of going back to the previous page on webview.

<WebViewExt :src="webviewLink" builtInZoomControls="false" displayZoomControls="false" />

How can we handle this?

Answer 1

Solved it myself.

First, add this to the top of your script:

const application = require("tns-core-modules/application");

Then in your mounted function check the back button activity.

if (application.android) {
            application.android.on(application.AndroidApplication.activityBackPressedEvent, function (args) {
                console.log("Event: " + args.eventName + ", Activity: " + args.activity);
    Set args.cancel = true; // to cancel back navigation and do something custom.
            });
        }

More info here: https://docs.nativescript.org/core-concepts/application-lifecycle