dug-svelte-router

A simple client-side hash-based router for Svelte apps.

import Router from 'dug-svelte-router'

Example

html

<a href="#">Home</a>
<a href="#about">About</a>
<a href="#blog">Blog</a>

This is designed only to work with hash-based routes.

script

<Router routes={[
    {
        component: HomePage
    },
    {
        hash: '#about',
        component: About
    },
    {
        hash: 'layout:#blog',
        component: Blog
    }
]}/>

To make a route act like a "layout" (have other routes inside of it), add "layout:" to the hash.

code on the blog page

<a href="#blog/1">blog 1</a>
<a href="#blog/2">blog 2</a>

<Router routes={[
    {
        hash: '#blog/1',
        component: Blog1
    },
    {
        hash: '#blog/2',
        component: Blog2
    }
]}/>

Lifecycle

By default, routes are not mounted until they are navigated to. When navigating away from a route, it is not destroyed, but styled to display: none.

To force a route to pre-mount on, add mount: true to its route object. To force it to destroy itself, add destroy: true.

You can also add the props mountAll={true} and destroyAll={true} to a router component.