ナビゲーションルーター

Framework7 Svelteには、強力かつ柔軟なルーターが搭載されています。そして、それを動作させるためには、Routesを指定する必要があります。

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

<!-- App.svelte -->
<App { ...f7params }>
  <!-- カレントビュー/ルーター、初期ページはhome.svelteコンポーネントからロードされる -->
  <View main url="/" />
</App>
<script>
  // ページコンポーネントのインポート
  import HomePage from 'home.svelte';
  import AboutPage from 'about.svelte';
  import LoginPage from 'login.svelte';

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

  const f7params = {
    name: 'My App',
    id: 'com.myapp.test',
    // アプリのルートを指定する
    routes: [
      {
        path: '/',
        component: HomePage,
      },
      {
        path: '/about/',
        component: AboutPage,
      },
      {
        path: '/login/',
        component: LoginPage,
      },
    ],
  };
</script>

<!-- home.svelte -->
<Page name="home">
  <Navbar title="Home Page" />
  ...
  <Link href="/about/">About Page</Link>
  <Link href="/login/">Login Page</Link>
</Page>
<script>
  import { Page, Navbar, Link } from 'framework7-svelte';
</script>

<!-- about.svelte -->
<Page name="about">
  <Navbar title="About" />
  <!-- ページコンテンツ -->
  ...
</Page>
<script>
  import { Page, Navbar } from 'framework7-svelte';
</script>

<!-- login.svelte -->
<Page name="login">
  <Navbar title="Login" />
  <!-- ページコンテンツ -->
  ...
</Page>
<script>
  import { Page, Navbar } from 'framework7-svelte';
</script>

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

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

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

// ルートとパラム
{
  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.svelte'),
},

また、よりコントロールが必要な場合は、async ルートを使用します。

{
  path: '/about/',
  async({ resolve }) {
    // dynamic import component, returns promise
    import('./pages/about.svelte').then((module) => {
      // コンポーネントで解決する
      resolve({ component: module.default })
    });
  } ,
},

ルーターAPI

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

<Page>
  ...
  <Link onClick={() => f7router.navigate('/about/')}>About</Link>
  <Link onClick={() => f7router.back()}>Go Back</Link>
</Page>
<script>
  import { onMount } from 'svelte';
  import { Page, Link } from 'framework7-svelte';

  // Routerコンポーネントは、現在のRouterインスタンスでf7router propを受け取ります。
  export let f7router;
  // ルーターコンポーネントは、現在のルートデータでf7route propを受け取ります。
  export let f7route;

  onMount(() => {
    // 現在のルートデータを出力する
    console.log(f7route); // -> { url: '/foo/', query: { id: 3 }, ... }
  });
</script>