Navigation Router

We can use Framework7 router with Vue js for navigation without loading web pages.

<f7-view>
    <f7-pages>
        <f7-page>
            <f7-link href=”/signin/”></f7-link>
            <f7-link href=”/home/”></f7-link>
        </f7-page>
    </f7-pages>
</f7-view>

Now we will have to map components to routes. It should be done in routes parameter on

App initialization:

/* Create component for signin page */
Vue.component(‘signin-page’, {
template: ‘<f7-page name=”signin”></f7-page>’
})

/* Create component for home page */
Vue.component(‘home-page’, {
template: ‘<f7-page name=”home”></f7-page>’
})

/* Init App */
new Vue({
    el: ‘#app’,
    framework7: {
        root: ‘#app’,
        routes: [
            {
                path: ‘/signin/’,
                component: ‘signin-page’
            },
            {
                path: ‘/home/’,
                component: ‘home-page’
            }
        ]
    }
})