clixsoftware / svelte-router

Router component for Svelte

Svelte Router

Router component for Svelte

This branch is for Svelte v1.8.1+. For usage with Svelte v1.8.0-, see the 0.1.x branch.

Docs

Comming soon...

Installation

Using npm:

npm install --save svelte-router

Using yarn:

yarn add svelte-router

Examples

<div>
  <RouterLink to="/">Home</RouterLink>
  <RouterLink to="/welcome">Welcome</RouterLink>
  <div id="app"></div>
</div>

<script>
  import { Store } from 'svelte/store'
  import SvelteRouter from 'svelte-router'
  import Home from './Home.html'
  import Welcome from './Welcome.html'
  import Animal from './Animal.html'

  const { createRouter, RouterLink } = SvelteRouter

  const router = createRouter({
    '/': Home,
    '/welcome': Welcome,
    '/animal': {
      Component: Animal,
      props: new Store({
        animal: 'dog',
        sheep: 'baaah',
        moo: {
          cow: true,
          foo: 'bar'
        }
      })
    }
  })

  export default {
    oncreate () {
      router.create('#app')
      // router.create(document.querySelector('#app'))
    },

    ondestroy () {
      router.destroy()
    },

    components: {
      RouterLink
    }
  }
</script>

<style>
  .router-link-active {
    color: red;
  }
</style>

API

createRouter

• push(path: string)
• replace(path: string)
• go(n: number)
• listen(fn: function)

RouterLink

• replace: Boolean

Contributors

• @rumpytim
• @RobBrazier

TODO

• Add unit test
• Write a documentation