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