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

Arturoartus

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.

Maser

thank you , its works well, see my answer below for the one using vue – Disburse

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....

Colorblind

Answer 3

I used a structure like the one below. The back button works properly.

---

In app.js. (Add pushState and pushStateOnLoad)

..
view: {
        stackPages: true,
        pushState: true,
        pushStateOnLoad: false
    },
..

---

Add data-url="/#!" to "index.html" (i was add only for index.html. i wasn't add for other pages.)

<div class="view view-main view-init safe-areas" data-master-detail-breakpoint="800" data-url="/#!">
...
</div>

---

For example, the index.html definition in the router.js file is below. I didn't make any changes here.

var routes = [
  // Index page
  {
    path: '/',
    componentUrl: './index.html',
    name: 'home',
  },
...
]

Guayaquil

Answer 4

I am using vue + framework 7, and this is my answer by enhancing @epilurzu answer

If you generate the project using framework7 CLI you may got app.vue belongs to the components folder, then you just need to edit that one to below details.

<template>
  <f7-app :params="f7params" >
    <f7-view main class="safe-areas" url="/"></f7-view>
  </f7-app>
</template>
<script>
  import routes from '../js/routes.js';
  export default {
    data() {
      return {
        f7params: {
          name: 'SignsIS App',
          theme: 'auto', 
          routes: routes,
          view:{
            pushState: true,
            pushStateSeparator: '#',
            pushStateOnLoad: false
          } 
        }
      }
    },
    methods: {
    },
    mounted() {
    }
  }
</script>

Then run it in emulator

Disburse