Navigation Router

Framework7 Svelte as Framework7 itself comes with powerful and flexible router. And to make it work we must specify Routes.

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

<!-- App.svelte -->
<App params={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',
    id: 'com.myapp.test',
    // 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>

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

Pass Props To Components

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.

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

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

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

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

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

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

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

Async Lazy Components

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:

{
  path: '/about/',
  async(routeTo, routeFrom, resolve, reject) {
    // dynamic import component, returns promise
    import('./pages/about.svelte').then((module) => {
      // resolve with component
      resolve({ component: module.default })
    });
  } ,
},

Router API

To access router instance and current routes to use Router API you can use special f7router and f7route component props:

f7router

This property only available for components loaded with router (e.g. pages, routable modals, routable tabs). If you need to access this property in "deeper" child components, then you need to pass it down using props.

Framework7 Router Instance. It has a lot of useful Methods & Properties to use for navigation

f7route

This property only available for components loaded with router (e.g. pages, routable modals, routable tabs). If you need to access this property in "deeper" child components, then you need to pass it down using props.

Object with current route data that was used to load this page, tab or modal. It has the following properties

  • url - route URL
  • path - route path
  • query - object with route query. If the url is /page/?id=5&foo=bar then it will contain the following object {id: '5', foo: 'bar'}
  • params - route params. If we have matching route with /page/user/:userId/post/:postId/ path and url of the page is /page/user/55/post/12/ then it will be the following object {userId: '55', postId: '12'}
  • name - route name
  • hash - route URL hash
  • route - object with matching route from available routes
  • context - context that was passed to the route
<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>