(Solved) pushStateRoot: '/custom-pushStateRoot', adds unwanted #! for the URL

      pushStateRoot: '/custom-pushStateRoot',

Generate this URL (unwanted #!)

code

// Init F7 Vue Plugin
Framework7.use(Framework7Vue);

// Init Page Components
Vue.component('page-about', {
  template: '#page-about'
});
Vue.component('page-form', {
  template: '#page-form'
});
Vue.component('page-dynamic-routing', {
  template: '#page-dynamic-routing'
});
Vue.component('page-not-found', {
  template: '#page-not-found'
});

// Init App
new Vue({
  el: '#app',
  data: function () {
    return {
      // Framework7 parameters here
      f7params: {
        root: '#app', // App root element
        id: 'io.framework7.testapp', // App bundle ID
        name: 'Framework7', // App name
        theme: 'auto', // Automatic theme detection
        view: {
          pushState: true,
          history: true,
          pushStateRoot: '/custom-pushStateRoot',
        },

        // App routes
        routes: [
          {
            path: '/about/',
            component: 'page-about',
            options: {
              // options
              animate: true,
              pushState: true,
              history: true,
            },
          },
          {
            path: '/form/',
            component: 'page-form'
          },
          {
            path: '/dynamic-route/blog/:blogId/post/:postId/',
            component: 'page-dynamic-routing'
          },
          {
            path: '(.*)',
            component: 'page-not-found',
          },
        ],
      }
    }
  },
});

Vue.js Simple

I use this template:

Check pushStateSeparator parameter http://framework7.io/docs/view.html#view-parameters

1 Like

Great Thanks (I miss this option).

i have problem when reload page without pushStateSeparator on react.
i have url like this :

http://localhost:8080/product/:product-slug

and error say : …/product/js/app.js net::ERR_ABORTED 404 (Not Found)

how to fixed this?
sorry for bad english

1 Like