導航路由

Framework7 Svelte 與 Framework7 本身一樣，配備強大且彈性的路由器。若要讓它運作，我們必須指定路由。

Framework7 Svelte 唯一的不同點在於，在 Svelte 中，我們已經使用 Svelte 元件組合我們的應用程式，因此我們需要將我們的頁面（Svelte 元件）對應到路由。這可透過在路由的 component 屬性中傳遞 Svelte 元件來完成。以下是基本範例

<!-- App.svelte -->
<App { ...f7params }>
  <!-- Current View/Router, initial page will be loaded from home.svelte component -->
  <View main url="/" />
</App>
<script>
  // Import pages components
  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',
    // specify routes for app
    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 content -->
  ...
</Page>
<script>
  import { Page, Navbar } from 'framework7-svelte';
</script>

<!-- login.svelte -->
<Page name="login">
  <Navbar title="Login" />
  <!-- Page content -->
  ...
</Page>
<script>
  import { Page, Navbar } from 'framework7-svelte';
</script>

傳遞屬性給元件

可以將元件屬性傳遞給路由載入的 Svelte 元件。有幾種方法可以做到這一點。

首先，所有路由參數都會自動傳遞為元件的屬性，例如

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

因此，如果我們透過 /blog/45/comments/122/ URL 導航，則下列資料會傳遞給屬性

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

另一個選項是在路由的 options 中指定屬性

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

最後，當我們使用 API 導航時，可以動態傳遞屬性給路由元件

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 with component
      resolve({ component: module.default })
    });
  } ,
},

路由 API

若要存取路由執行個體並使用路由 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 component will receive f7router prop with current Router instance
  export let f7router;
  // Router component will receive f7route prop with current route data
  export let f7route;

  onMount(() => {
    // output current route data
    console.log(f7route); // -> { url: '/foo/', query: { id: 3 }, ... }
  });
</script>