ナビゲーションルーター

Framework7-Vueには、強力で柔軟なルーターが搭載されています。そして、それを動作させるためには、Routesを指定しなければなりません。

Framework7-Vueの唯一の違いは、Vue.jsではすでにVueコンポーネントでアプリケーションを構成しているので、ページ（Vueコンポーネント）をルートにマッピングする必要があることです。これは、ルートの component プロパティに Vue コンポーネントを渡すことで実現できます。以下に基本的な例を示します。

<!-- app.vue -->
<template>
  <f7-app v-bind="f7params">
    <!-- カレントビュー/ルーター、初期ページはhome.vueコンポーネントからロードされる -->
    <f7-view main url="/"></f7-view>
  </f7-app>
</template>

<script>
  /* Import pages components */
  import HomePage from 'home.vue'
  import AboutPage from 'about.vue'
  import LoginPage from 'login.vue'

  /*
  Now we need to map components to routes.
  We need to pass them along with the F7 app parameters to <f7-app> component
  */

  export default {
    data() {
      return {
        // アプリのパラメータ
        f7params: {
          name: 'My App',
          id: 'com.myapp.test',
          // アプリのルートを指定する
          routes: [
            {
              path: '/',
              component: HomePage,
            },
            {
              path: '/about/',
              component: AboutPage,
            },
            {
              path: '/login/',
              component: LoginPage,
            },
            // ...
          ],
          // ...
        }
      };
    },
  }
</script>

<!-- home.vue -->
<template>
  <f7-page name="home">
    <f7-navbar title="Home"></f7-navbar>
    <!-- ページのコンテンツ -->
    ...
    <f7-link href="/about/">About Page</f7-link>
    <f7-link href="/login/">Login Page</f7-link>
  </f7-page>
</template>
<script>
  export default {}
</script>


<!-- about.vue -->
<template>
  <f7-page name="about">
    <f7-navbar title="About"></f7-navbar>
    <!-- ページコンテンツ -->
  </f7-page>
</template>
<script>
  export default {}
</script>

<!-- ログイン.vue -->
<template>
  <f7-page name="login">
    <f7-navbar title="Login"></f7-navbar>
    <!-- ページの内容 -->
  </f7-page>
</template>
<script>
  export default {}
</script>

コンポーネントにプロップを渡す

ルータで読み込まれたVueコンポーネントに、コンポーネントのプロップを渡すことができます。これにはいくつかの方法があります。

まず、すべてのルートのパラメータは、自動的にコンポーネントにプロップとして渡されます。

// route with params
{
  path: '/blog/:postId/comments/:commentId/',
  component: BlogPost,
}

つまり、/blog/45/comments/122/というURLで移動した場合、以下のデータがpropsに渡されます。

{
  postId: '45',
  commentId: '122',
}

もう一つの方法は、ルートの options でpropsを指定することです。

{
  path: '/some-page/',
  component: SomeComponent,
  options: {
    props: {
      foo: 'bar',
      bar: true,
    },
  },
}

最後に、APIでナビゲートする際に、ルートコンポーネントにpropsを動的に渡すことができます。

f7router.navigate('/some-page/', {
  props: {
    foo: 'bar',
    bar: true,
  }
})

非同期遅延コンポーネント

Webpackでは、必要に応じてページコンポーネントをロードすることができます。例えば、F7のルートasyncComponentで可能になります。

{
  path: '/about/',
  asyncComponent: () => import('./pages/about.vue'),
},

また、もっとコントロールしたい場合は、async ルートを使用します。

{
  path: '/about/',
  async({ resolve }) {
    // dynamic import component; returns promise
    const vueComponent = () => import('./pages/about.vue');
    // プロミスの解決
    vueComponent().then((vc) => {
      // コンポーネントで解決
      resolve({ component: vc.default })
    });
  } ,
},

ルーターAPI

ルーターのインスタンスにアクセスしてルーターAPIを使用するには、コンポーネントの特別なf7routerコンポーネントプロップを使用できます。

<template>
  ...
  <f7-link @click="f7router.navigate('/about/')">About</f7-link>
  <f7-link @click="f7router.back()">Go Back</f7-link>
</template>
<script>
  export default {
    props: {
      f7router: Object,
    }
  }
</script>