[framework7-vue] Route path not reflected in URL

Questions
1

Hi, I’m using framework7-vue.

When I run the app and navigate between pages, the URL doesn’t change. Anyone know how to make it reflect path change?

Thank you.

2

Hi, i dont know how to make it with f7. but why do you need this?
You can try with the history param.

history boolean whether the page should be saved in router history

https://framework7.io/docs/routes.html#route-options

3

Thanks for replying.

I want to be able to open different page with different URL. E.g. ‘https://example.com/‘ should open default page, and ‘https://example.com/profile’ should open the ‘Profile’ page.

4

Can you provide some code so that we can help you ?

5

Sure.

Here is my app config and routes. I hope to have the path reflected in URL and different URL should open different page. Thanks.

main.js

new Vue({
  store,
  framework7: {
    root: '#app',
    id: 'something',
    name: 'App Name',
    theme: 'ios',
    routes,
    pushState: true,
  },
  render: (h) => h(App),
}).$mount('#app')

routes.js

import MainTabs from 'layout/MainTabs.vue'
import Home from 'pages/Home.vue'
import Profile from 'pages/Profile.vue'
import SignUp from 'pages/SignUp.vue'

export default [
  {
    path: '/',
    component: MainTabs,
    tabs: [
      {
        path: '/',
        id: 'home',
        component: Home,
      },
      {
        path: '/profile',
        id: 'profile',
        component: Profile,
      },
    ],
  },
  {
    path: '/sign-up',
    component: SignUp,
  },
]
6

Did you try url parameter ?

url: './pages/home.html',
7

I tried url parameters like this: “/profile” without ".html”. And didnt work.

8

Also it shouldn’t care about the url parameter because I’m using Vue, so the parameter to supply view is component. And url has nothing to do with the actual URL as far as I understand it.

9

You need to enable pushState on main view, not under framework7 parameters, e.g.:

<f7-view main :push-state="true" ...></f7-view>
2 Likes
10

GREAT!!! Thanks a lot!

By the way, do you know how to omit #! in URL? I tried with :history={true}, but it doesn’t work.

11

You can omit the #! in the URL by removing the push-state-separator:

<f7-view main push-state-separator="" ...></f7-view>
1 Like
12

how about react?
i have same problem but using react