Issue with Android Back Button exit app if router is two level deep

I have looked around and followed some advice on the forum. Got handleAndroidBackButton code from framework7 cli repo. framework7-cli/capacitor-app.js at master · framework7io/framework7-cli · GitHub

And did something like this in App.vue. Not sure if that’s the correct way to do it.

<script setup>
import { onMounted, ref } from "vue";
import { App as CapacitorApp } from "@capacitor/app";
import {
	f7,
	f7ready,
	f7App,
	f7Views,
	f7View,
	f7Panel,
} from "framework7-vue";
import { getDevice } from "framework7/lite-bundle";
import capacitorApp from "./js/capacitor-app.js";

const device = getDevice();

onMounted(() => {
	fetchSettings();
	f7ready(() => {
		// Init capacitor APIs (see capacitor-app.js)
		if (device.capacitor) {
			capacitorApp.init(f7);
		}

		document.addEventListener("backbutton", (e) => {
			handleAndroidBackButton();
		});

	});
});

function handleAndroidBackButton() {
	var f7 = capacitorApp.f7;
	const $ = f7.$;
	if (f7.device.electron || !window.Capacitor || !window.Capacitor.Plugins.App)
		return;
	window.Capacitor.Plugins.App.addListener(
		"backButton",
		function () {
			if ($(".actions-modal.modal-in").length) {
				f7.actions.close(".actions-modal.modal-in");
				return;
			}
			if ($(".dialog.modal-in").length) {
				f7.dialog.close(".dialog.modal-in");
				return;
			}
			if ($(".sheet-modal.modal-in").length) {
				f7.sheet.close(".sheet-modal.modal-in");
				return;
			}
			if ($(".popover.modal-in").length) {
				f7.popover.close(".popover.modal-in");
				return;
			}
			if ($(".popup.modal-in").length) {
				if ($(".popup.modal-in>.view").length) {
					const currentView = f7.views.get(".popup.modal-in>.view");
					if (
						currentView &&
						currentView.router &&
						currentView.router.history.length > 1
					) {
						currentView.router.back();
						return;
					}
				}
				f7.popup.close(".popup.modal-in");
				return;
			}
			if ($(".login-screen.modal-in").length) {
				f7.loginScreen.close(".login-screen.modal-in");
				return;
			}

			if ($(".page-current .searchbar-enabled").length) {
				f7.searchbar.disable(".page-current .searchbar-enabled");
				return;
			}

			if ($(".page-current .card-expandable.card-opened").length) {
				f7.card.close(".page-current .card-expandable.card-opened");
				return;
			}

			const currentView = f7.views.current;
			if (
				currentView &&
				currentView.router &&
				currentView.router.history.length > 1
			) {
				currentView.router.back();
				return;
			}

			if ($(".panel.panel-in").length) {
				f7.panel.close(".panel.panel-in");
				return;
			}

			f7.dialog.confirm("Are u sure you want to exit?", function () {
				CapacitorApp.exitApp();
			});
		},
		false
	);
}
</script>

It works if router is one level deep. If I go to page X and then hit android back button, it comes back fine and pressing it second time, it shows confirm dialog to exit the app.

But if I go to page X and then page Y. Pressing the back button first time takes it back to page X and on the second attempt, it tried to exit the app instead of coming back to the homepage normally.

I think the problem is currentView.router.history.length > 1 . I have console.log(props.f7router.history.length); on all 3 pages and when it comes to homepage on initial app load, history length is 0, when I go to page X, it’s 1 and when I go to page Y, it’s 2. Then coming back to page X, history length is back to 1 and then pressing back button again, it tried to quit because history length is not bigger than 1.

I’m not sure what am i doing wrong and how to fix this. Any help would be really appreciated.