Back button close app Framework7-vue v.3.6.6

Hello,
I’m using framework7-vue 3.6.6 version to create my app.
When I click back button I exit the app. This is a behavior that I want to avoid, I want to navigate into old views. I tried all options:

  • Putting :push-state=“true” in main view (I get white screen!)
  • Putting in f7params: view: { pushState: true} (I get white screen too)

If I do not use the options mentioned before I can use and navigate app using framework7 navbar but if I click back button the app will be closed.
Help me, the app is almost done, I just need to solve this annoying problem!

Thanks

2 Likes

This is the only solution I found until now and works well… Can I suggest to include this code for default? Or to implement something to better control this back button? Because this is the normal behavior of an android app…and a user that doesn’t know well cordova and framework7 can become crazy implementing this!!!

mounted() {
        var app = this.$f7;
        var $$ = this.$$;

        // Listen to Cordova's backbutton event
        document.addEventListener('backbutton', function navigateBack() {
                // Use Framework7's router to navigate back
                    var mainView = app.views.main;

                    var leftp = app.panel.left && app.panel.left.opened;
                    var rightp = app.panel.right && app.panel.right.opened;

                    if (leftp || rightp) {

                        app.panel.close();
                        return false;
                    } else if ($$('.modal-in').length > 0) {

                        app.dialog.close();
                        app.popup.close();
                        return false;
                    } else if (app.views.main.router.url == '/') {
                        navigator.app.exitApp();
                    } else {
                       mainView.router.back();
                    }

            }
            , false)
    }
1 Like

I would suggest, instead of adding the event listener in mounted, add it in ‘deviceready’ event.

document.addEventListener("deviceready", onDeviceReady, false);

Same here, please support us, we need a solution for this.

Just a note: for some reason this does not work if you set :reloadPages=“true” on the main view.