Language: ENCN

Navigation Router

With Framework7 & Vue.js, we are already composing our application with components. All we need to do is map our components to the routes. Here's a basic example:

<!-- Current View/Router -->
<f7-view>
  <!-- All pages are rendered inside of Pages -->
  <f7-pages>
    <!-- Initial Page -->
    <f7-page>
      ...
      <f7-link href="/about/">About App</f7-link>
      <f7-link href="/login/">Login</f7-link>
    </f7-page>
  </f7-pages>
</f7-view>

Now we need to map components to routes. It should be done in routes parameter on App Initialization

// 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: {
        root: '#app',
        // Map routes
        routes: [
            {
                path: '/about/',
                component: 'page-about'
            },
            {
                path: '/login/',
                component: 'page-login'
            }
        ]
    }
})

If you use single file components (with Webpack or Browserify):

<!-- 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
            }
        ]
    }
})
  • Note, that router is intended to load Page as component only

  • All pages are rendered inside of the Pages component of the current (or specified) View

  • Only one Pages component is allowed inside of one View

  • You may have as many Views as required (e.g. in Popup, in Side Panels)

Dynamic Route Matching

Very often we will need to map routes with the given pattern to the same component. In specified routes we can use a dynamic segment in the path to achieve that.

Let's say we have the following link:

<f7-link href="/user/45/posts/28/?sort=first#opened">Read More</f7-link>

And the following pattern in specified route path:

import PostPage from 'post.vue'

// Init App
new Vue({
    el: '#app',
    framework7: {
        root: '#app',
        // Map routes
        routes: [
            {
                // We can use patter here:
                path: '/user/:userId/posts/:postId',
                component: PostPage
            }
        ]
    }
})

In this case we have access to $route component property that we can use, e.g. in post.vue:

<!-- post.vue -->
<template>
  <f7-page>
    <f7-navbar title="Post"></f7-navbar>
    <ul>
      <li>Route: {{$route.route}}</li>
      <li>Url: {{$route.url}}</li>
      <li>Path: {{$route.path}}</li>
      <li>User ID: {{$route.params.userId}}</li>
      <li>Post ID: {{$route.params.postId}}</li>
      <li>Query: {{JSON.stringify($route.query)}}</li>
      <li>Hash: {{$route.hash}}
    </ul>
  </f7-page>
</template>

And the output will be:

...
<ul>
  <li>Route: /user/:userId/posts/:postId</li>
  <li>Url: /user/45/posts/28/?sort=first#opened</li>
  <li>Path: /user/45/posts/28/</li>
  <li>User ID: 45</li>
  <li>Post ID: 28</li>
  <li>Query: {"sort":"first"}</li>
  <li>Hash: opened</li>
</ul>
...

$route has the following properties:

$route.url Url of the loaded route/page
$route.params Object with route parameters (e.g. userId and postId in the example above)
$route.hash Route hash
$route.query Parsed query object
$route.path Route path (same as $route.url but without query and hash)
$route.route Matched route from specified routes parameter

Router API

To access router instance and use Router API you can use special $router property of component:

<f7-link @click="$router.load({url: '/about/'})">About</f7-link>
<f7-link @click="$router.back()">Go Back</f7-link>