-
Get Started
-
Vue Components
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
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:
<!-- Current View/Router -->
<f7-view>
<!-- Initial Page -->
<f7-page>
...
<f7-link href="/about/">About App</f7-link>
<f7-link href="/login/">Login</f7-link>
</f7-page>
</f7-view>
Now we need to map components to routes. It should be done in routes
parameter on App Initialization, or for each View separately:
// Create Component for About page
Vue.component('page-about', {
template: '<f7-page name="about">...</f7-page>'
})
// Create Component for Login page
Vue.component('page-login', {
template: '<f7-page name="login">...</f7-page>'
})
// Init App
new Vue({
el: '#app',
framework7: {
// Map routes
routes: [
{
path: '/about/',
component: 'page-about'
},
{
path: '/login/',
component: 'page-login'
}
]
}
})
If you use single file components (with Webpack, Rollup or other bundler):
<!-- about.vue -->
<template>
<f7-page name="about">
<!-- Page content -->
</f7-page>
</template>
<script>
export default {}
</script>
<!-- login.vue -->
<template>
<f7-page name="login">
<!-- Page content -->
</f7-page>
</template>
<script>
export default {}
</script>
import AboutPage from 'about.vue'
import LoginPage from 'login.vue'
// Init App
new Vue({
el: '#app',
framework7: {
root: '#app',
// Map routes
routes: [
{
path: '/about/',
component: AboutPage
},
{
path: '/login/',
component: LoginPage
}
]
}
})
Check the full Routes Documentation to know about all possible routes options, how to use Nested Routes, Routable Tabs and Routable Modals.
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 (and their child components) that you load according to routes. In parent components (like in View, or where you init your Vue app instance) they are not accessible as your app may have few routers (Views) at a time. So in this case use access to initialized View Instance, e.g. $f7.views.main.router