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!
Url property must be there. Check the view’s pushState parameters
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.
You must set correctly set pushState
parameters if you need it to reflect browser/window url http://framework7.io/docs/view.html#view-parameters
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.
Ok, finally got it.
-
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.
-
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