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

Svelte router using a store and components.
https://github.com/jamen/svelte-router

Last synced: 16 days ago
JSON representation

Svelte router using a store and components.

• Host: GitHub
• URL: https://github.com/jamen/svelte-router
• Owner: jamen
• License: mit
• Created: 2019-05-16T06:33:04.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-08-30T17:10:21.000Z (5 months ago)
• Last Synced: 2025-01-12T09:42:19.785Z (19 days ago)
• Language: JavaScript
• Homepage:
• Size: 13.7 KB
• Stars: 7
• Watchers: 2
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @jamen/svelte-router

Svelte router with a store and components.

**NOTE:** Consider using [SvelteKit](https://kit.svelte.dev/) with [@sveltejs/adapter-static](https://github.com/sveltejs/kit/tree/master/packages/adapter-static) instead. It has routing.

## Usage

First setup a view with ``:

```html

    import { Router } from '@jamen/svelte-router'

    import * as pages from './pages.js'

    const routes = {

        '/': pages.Home,

        '/contact': pages.Contact,

        404: pages.Lost,

        // ...

    }

```

Then you can use `` to change the view:

```html

    import { Link } from '@jamen/svelte-router'

    Home

    Contact

```

And you can use the `router` store to have your own routing:

```html

    import { router } from '@jamen/svelte-router'

{#if $router.query.name}

    
Hello {$router.query.name}!

{/if}


You visited {$router.path}.

```


If you want to use your own store, then both `Router` and `Link` accept a `router` to change the store:

```html

    import { Router, Link } from '@jamen/svelte-router'

    import { custom } from '../stores.js'

    // ...

Home

```

With this you may want your own link component:

```html

    import { Link } from '@jamen/svelte-router'

    import { custom } from '../stores.js'

```