dug-svelte-router
v0.1.1
Published
A simple client-side hash-based router for Svelte apps.
Downloads
6
Maintainers
Readme
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.