Navigation Router

The only difference in Framework7 Svelte is that in Svelte we are already composing our application with Svelte components, so we need to map our Pages (Svelte components) to the routes. It can be done by passing Svelte component in property of the route. Here’s a basic example:

<!-- 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>

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

It is possible to pass component props to Svelte components loaded by router. There are few ways to do it.

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

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

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

Another option is to specify props in route’s options:

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

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

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

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

Or with async route if we need more control over it:

<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>