pushState problem Framework7 v3.5.2 doesn't load the view

Question

I've read all question about this problem without finding any solution.

I'm using the current latest version of Framework7 (3.5.2) and I'm trying to implement the pushState statment in order to enable the backButton on Android devices.

In my app.js I've wrote this:

const app = new Framework7({
    root: '#app',
    name: conf.appName,
    version: conf.version,
    id: conf.id,
    theme: 'auto',
    panel: {
        swipe: 'left',
    },
    view: {
        pushState: true,
        //pushStateRoot: '',
        //pushStateSeparator: '#!',
      }
    })

If I set pushState: false, the application works without any problem. If I set true, the application give me a blank page (I've tried using xampp, electron and cordova, I get the same results).

Am I missing something? The Framework7 Doc it's to much confusing..

If pushState is bugged, there are other solution in order to use the backButton on android with Framework7?

Thanks

Answer 1

Look at this:

view: {
    pushState: true,
    pushStateSeparator: '#',
    pushStateOnLoad: false
}

You had to remove the pushStateRoot Parameter, that was a good call. But you also have to insert pushStateSeparator, this let you navigate in the right url (without '#'). You need to use pushStateOnLoad too. This one let you "Disable to ignore parsing push state URL and loading page on app load."

For more see the documentation.

Answer 2

this code will give ability to control back button action, for this example you will got back action and exit app if you are in home page....

document.addEventListener("deviceready", function () {
    /* Set Android Back Button  */
    document.addEventListener("backbutton", function(){
        mainView.router.back();

        // Exit from app if user press back in home page
        if($$('.page-current').data('name') == 'home'){
            navigator.app.exitApp();
        }
    }, false);
});

But, I think issue not in handling backbutton, I think you need to do some of these thing, and its may resolve issue:

1) add pushState to options in your router.navigate(url, options) OR add data-push-state="true" to your view wrapper like this: <div class="view" ... data-push-state="true">.

2) try to add reloadCurrent or reloadPrevious in backbutton listener.

dependence of my prev error, The issue is resolved when I do reload page when back, since its will refresh dom object and got data, special if data is load from ajax....