Navigation Router
Framework7-Vue as Framework7 itself comes with powerful and flexible router. And to make it work we must specify Routes.
The only difference in Framework7-Vue is that in Vue.js we are already composing our application with Vue components, so we need to map our Pages (Vue components) to the routes. It can be done by passing Vue component in component
property of the route. Here’s a basic example:
<!-- app.vue -->
<template>
<f7-app :params="f7params">
<!-- Current View/Router, initial page will be loaded from home.vue component -->
<f7-view main url="/"></f7-view>
</f7-app>
</template>
<script>
/* Import pages components */
import HomePage from 'home.vue'
import AboutPage from 'about.vue'
import LoginPage from 'login.vue'
/*
Now we need to map components to routes.
We need to pass them along with the F7 app parameters to <f7-app> component
*/
export default {
data() {
return {
// app params
f7params: {
name: 'My App',
id: 'com.myapp.test',
// specify routes for app
routes: [
{
path: '/',
component: HomePage,
},
{
path: '/about/',
component: AboutPage,
},
{
path: '/login/',
component: LoginPage,
},
// ...
],
// ...
}
};
},
}
</script>
<!-- home.vue -->
<template>
<f7-page name="home">
<f7-navbar title="Home"></f7-navbar>
<!-- Page content -->
...
<f7-link href="/about/">About Page</f7-link>
<f7-link href="/login/">Login Page</f7-link>
</f7-page>
</template>
<script>
export default {}
</script>
<!-- about.vue -->
<template>
<f7-page name="about">
<f7-navbar title="About"></f7-navbar>
<!-- Page content -->
</f7-page>
</template>
<script>
export default {}
</script>
<!-- login.vue -->
<template>
<f7-page name="login">
<f7-navbar title="Login"></f7-navbar>
<!-- Page content -->
</f7-page>
</template>
<script>
export default {}
</script>
Check the full Routes Documentation to know about all possible routes options, how to use Nested Routes, Routable Tabs and Routable Modals.
Pass Props To Components
It is possible to pass component props to Vue components loaded by router. There are few ways to do it.
First of all, all route params will be automatically passed as props to component, e.g.
// route with params
{
path: '/blog/:postId/comments/:commentId/',
component: BlogPost,
}
So if we navigate by /blog/45/comments/122/
URL, then the following data will be passed to props:
{
postId: '45',
commentId: '122',
}
Another option is to specify props in route’s options
:
{
path: '/some-page/',
component: SomeComponent,
options: {
props: {
foo: 'bar',
bar: true,
},
},
}
And finally, props can be passed dynamically to route component when we navigate with API:
this.$f7router.navigate('/some-page/', {
props: {
foo: 'bar',
bar: true,
}
})
Async Lazy Components
With Webpack it is possible to load page components on demand, it is possible with F7’s async route, for example:
{
path: '/about',
async(routeTo, routeFrom, resolve, reject) {
// dynamic import component; returns promise
const vueComponent = () => import('./pages/about.vue');
// resolve promise
vueComponent().then((vc) => {
// resolve with component
resolve({ component: vc.default })
});
} ,
},
Router API
To access router instance and use Router API you can use special $f7router property of component:
<f7-link @click="$f7router.navigate('/about/')">About</f7-link>
<f7-link @click="$f7router.back()">Go Back</f7-link>
Please note, that $f7route
and $f7router
component properties are only available inside of custom page components that you load according to routes. In parent components (like in View, or where you init your Vue app instance) and in child components they are not accessible. So in this case use access to initialized View Instance, e.g. $f7.views.main.router