[SOLVED] How exaclty use Router?

Questions
1

Hello there. I have Vue+F7 application.

Here is my App.vue:

<template>
  <f7-app :params="f7params">
    <f7-view main url="/"></f7-view>
  </f7-app>
</template>

<style>

</style>

<script>
import Main from './components/Main.vue';
import Page from './components/Page.vue';

export default {
  name: 'app',
  data() {
    return {
      f7params: {
        name: 'MyApp',
        id: 'net.denisnp.myapp',
        // routes
        routes: [
          {
            name: 'main',
            path: '/',
            component: Main,
          },
          {
            name: 'page',
            path: '/page',
            component: Page,
          },
        ],
      },
    };
  },
};
</script>

This is Main.vue:

<template>
  <f7-page name="main">
    <div>Main</div>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {};
  },
};

</script>

And Page.vue:

<template>
  <f7-page name="page">
    <div>Page</div>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {};
  },
};

</script>

When I go to /page nothing happens, there is still Main text on page. When I go /page using JS it works, but in this case URL in address bar stands / instead of /page. What am I doing wrong?

UPD: Okay, got it. Just removed url="/" property from view. This was pretty unclear!

2

Url property must be there. Check the view’s pushState parameters

3

There are no other parameters except presented in my code above. All other is default. What should I set?

And the problem with address bar itsn’t primary. More important when I open /page in browser it doesn’t work with url property (shows Main instead of Page), but it works without it.

4

You must set correctly set pushState parameters if you need it to reflect browser/window url http://framework7.io/docs/view.html#view-parameters

5

Still can’t get it to work with url property presented. Tried different combinations of pushState parameters.

Does router use HTML5 history mode by default? Because I am trying to work with it like it does. I worked with vue-router previously and thought this is pretty similar, but it seems not.

So, how exaclty should I configure my app to get address in browser transform to /page (not #!/page!) when I call router.navigate('/page')? I’ve already tried history and pushState router options with pushState view’s option enabled, nothing changed.

P.S. At the end I’ve copied entire code from this example in docs, but when I click links, address still doesn’t change at all. And browser back button doesn’t work as supposed.

6

Ok, finally got it.

  1. Previously I set boolean property wrong. Changed <f7-view main url="/" pushState> to <f7-view main url="/" :pushState="true">. Strange, but I’ve double checked.

  2. I set pushStateSeparator=""

And it works as I wanted to. Thank you for your time!

P.S. So, I’ve found the difference. It seems like runtime-helpers/vue-component-props.js doesn’t see boolean properties.

1 Like