How to set `pushState` to true globally?

How to set pushState to be true for all pages? (vue) “hello world example” (main view’s navigation).

Under these docs are very detailed but almost zero examples of how to use view-parameter (Very very important topic :frowning: )
https://framework7.io/docs/view.html#view-parameters

It could be very helpful to add “hello world” example for this page.

Not working:

/* app.js */
// Init App
new Vue({
  el: '#app',
  view: {
    pushState: true
  },
  render: (h) => h(App),

  // Register App Component
  components: {
    app: App
  },
});

Basic Q, but I don’t have any ideas because the docs are missing.

+Also zero examples on this forum + GitHub (TIDY)

I’m facing the same problem. They have documented it without examples which is very much inconvenient for beginners like me. I understood that it should be used with pushStateRoot. But where that should be defined? In routes.js with views for that exact route information? All such examples are missing. Can someone please comment and give an example? Android back button makes the app exit.

1 Like

I find the solution

True to framework 7 cli vue starter (https://framework7.io/cli/)

Go to /src/components/app.vue and add this under f7params:

hello world example:

/src/components/app.vue (<script> tag)

<script>
import routes from '../js/routes.js';

export default {
    data() {
        return {
            // Framework7 Parameters
            f7params: {
                name: 'Hello world', // App name
                theme: 'md', // Automatic theme detection
                view: {
                  // https://framework7.io/docs/view.html
                    pushState: true, 

                    pushStateSeparator:""
                },
                // App routes
                routes: routes,
            },
        }
    }
}
</script>

routes

@Bhargav_Dixit - about routes - it very helpful first learn the idea of routes in general (Not related to framework7).

vue routing

free one hour course:

1 Like

Hi @Ezra_Siton , Thanks a lot for the detailed instructions and the links for understanding the router concept. I will surely go through it and try to understand.
I’m new to web development and don’t know Javascript yet. I am using framework7 core. I couldn’t apply the same technique here as the templates were a bit different and I’m using kitchen sink example for my app and just customising few things in there. I will learn routing and get back to you if I get into any doubt, Thanks buddy!

1 Like

You succeed? … on kitchen sink the f7params her:
https://github.com/framework7io/framework7/blob/master/kitchen-sink/vue/src/app.vue

1 Like

Hi Ezra,
Yes. Thank you.
The problem was with an additional view statement which was not defined. After going through the complete code, I got to know that this statement was additional and not required. After removing that, it worked fine.
Thanks a lot for your help and follow-up. :blush:

For anyone who is using Framework7 v6, pushState parameters has been renamed to browserHistory. So you should add following code in app.vue:
image

and with v-bind="f7params" in f7-app:
image

Hope this helps.

@joelz, does this work for you if you go to the route directly? For some reason, whenever I use browserHistorySeparator, it only works if I go to the route with the app. However, if I comment it out and use /#!, it works perfectly to access the route directly.