https://github.com/bluwy/svelte-router

An easy-to-use SPA router for Svelte
https://github.com/bluwy/svelte-router

router svelte

Last synced: 3 months ago
JSON representation

An easy-to-use SPA router for Svelte

• Host: GitHub
• URL: https://github.com/bluwy/svelte-router
• Owner: bluwy
• License: mit
• Created: 2020-07-17T17:28:17.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-08-03T07:09:39.000Z (over 1 year ago)
• Last Synced: 2024-11-02T03:42:08.590Z (3 months ago)
• Topics: router, svelte
• Language: TypeScript
• Homepage:
• Size: 492 KB
• Stars: 32
• Watchers: 3
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Svelte Router

[![package version](https://img.shields.io/npm/v/@bjornlu/svelte-router)](https://www.npmjs.com/package/@bjornlu/svelte-router)

[![npm downloads](https://img.shields.io/npm/dm/@bjornlu/svelte-router)](https://www.npmjs.com/package/@bjornlu/svelte-router)

[![ci](https://github.com/bluwy/svelte-router/workflows/CI/badge.svg?event=push)](https://github.com/bluwy/svelte-router/actions)

> Before you start, I'd highly recommend checking out [SvelteKit](https://github.com/sveltejs/kit) 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**](./docs/comparison.md)

## 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](https://github.com/sveltejs/kit) instead

- Relative navigations - Use absolute path and [dynamic syntax](./docs/guide.md#dynamic-syntax) instead

## Quick Start

Install [`@bjornlu/svelte-router`](https://www.npmjs.com/package/@bjornlu/svelte-router):

```bash

$ npm install @bjornlu/svelte-router

```

Define routes:

```js

// 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:

```svelte

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

  

    Home

  

  

```

Done!

## Documentation

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

- [Guide](./docs/guide.md): Covers common usage to advanced topics

- [API reference](./docs/api.md): Covers the structure of the API

## Examples

- [Basic](./examples/basic): Basic router usage

- [Lazy loading](./examples/lazy-loading): Lazy loading setup example

## Contributing

All contributions are welcomed. Check out [CONTRIBUTING.md](./CONTRIBUTING.md) for more details.

## License

MIT