How to set `pushState` to true globally?

Questions
1

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)

2

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
3

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:

image
image673×956 43.4 KB

image
image1045×455 51.5 KB

image
image791×360 9.33 KB

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
4

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
5

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

1 Like
6

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:

7

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.

1 Like
8

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

9

This is because the # is an url Fragment and as such its not fetched from the server as a real directory/file, and wont cause the 404 error.

So for that case you need to configure your server to rewrite and route to the index.html

You can use this .htaccess:

   RewriteEngine On
  # Redirection of requests to index.html
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -s [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^.*$ - [NC,L]
   # Redirect all non-file routes to index.html
  RewriteRule ^(?!.*\.).*$ index.html [NC,L]

You can put this .htaccess file in your public folder, so it is copied during build

For this to work, it is also important to not use relative paths otherwise when going to url like “/home/2” its going to fetch for example a “assets/vendor.js” files from that base!
For that if you use vue for example you can set the build to generate semi relative paths that starts with the “/” instead of “” , so do they are relative to the domain. For a vite(VUE) config for example change the base url to “/”. For webpack and other have their way

export default {
  plugins: [
    vue(),
    injectHtml({
      injectData: {
        TARGET: process.env.TARGET,
      },
    }),
  ],
  root: SRC_DIR,
  base: '/',
  publicDir: PUBLIC_DIR,
  build: {