Skip to content

bluwy/svelte-router

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Svelte Router

package version npm downloads ci

Before you start, I'd highly recommend checking out SvelteKit first. It has a flexible filesystem-based router officially supported by the Svelte team.

An easy-to-use SPA router for Svelte.

Comparison with other routers

Features

  • Super simple API
  • Support hash and path based navigation
  • Nested routes
  • Redirects and navigation guards (with async support)
  • Lazy loading routes
  • Auto base tag navigation

Not Supported

  • Server-side rendering (SSR) - Use SvelteKit instead
  • Relative navigations - Use absolute path and dynamic syntax instead

Quick Start

Install @bjornlu/svelte-router:

$ npm install @bjornlu/svelte-router

Define routes:

// main.js

import { initPathRouter } from '@bjornlu/svelte-router'
import App from './App.svelte'
import Home from './Home.svelte'

// Use `initHashRouter` for hash mode
initPathRouter([{ path: '/', component: Home }])

const app = new App({
  target: document.body
})

export default app

Render routes and links:

<!-- App.svelte -->

<script>
  import { RouterView, Link } from '@bjornlu/svelte-router'
</script>

<main>
  <nav>
    <Link to="/">Home</Link>
  </nav>
  <RouterView />
</main>

Done!

Documentation

Ready to learn more? The documentation is split into two parts:

  • Guide: Covers common usage to advanced topics
  • API reference: Covers the structure of the API

Examples

Contributing

All contributions are welcomed. Check out CONTRIBUTING.md for more details.

License

MIT