Navigation Router

    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 property of the route. Here’s a basic example:

    1. <!-- home.vue -->
    2. <template>
    3.   <f7-page name="home">
    4.     <f7-navbar title="Home"></f7-navbar>
    5.     <!-- Page content -->
    6.     ...
    7.     <f7-link href="/about/">About Page</f7-link>
    8.     <f7-link href="/login/">Login Page</f7-link>
    9.   </f7-page>
    10. </template>
    11. <script>
    12. </script>
    15. <!-- about.vue -->
    16. <template>
    18.     <f7-navbar title="About"></f7-navbar>
    19.     <!-- Page content -->
    20.   </f7-page>
    21. </template>
    22. <script>
    23.   export default {}
    24. </script>
    26. <!-- login.vue -->
    27. <template>
    28.   <f7-page name="login">
    29.     <!-- Page content -->
    30.   </f7-page>
    31. </template>
    32. <script>
    33.   export default {}

    Check the full to know about all possible routes options, how to use Nested Routes, and Routable Modals.

    First of all, all route params will be automatically passed as props to component, e.g.

    So if we navigate by /blog/45/comments/122/ URL, then the following data will be passed to props:

    1. {
    2.   postId: '45',
    3.   commentId: '122',
    4. }

    And finally, props can be passed dynamically to route component when we navigate with API:

    1. this.$f7router.navigate('/some-page/', {
    2.   props: {
    3.     foo: 'bar',
    4.     bar: true,
    5.   }
    6. })

    With Webpack it is possible to load page components on demand, it is possible with F7’s async route, for example:

    1. <f7-link @click="$f7router.navigate('/about/')">About</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 , e.g. $f7.views.main.router