Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tienpv222/svelte-hash-router
https://github.com/tienpv222/svelte-hash-router
router routing svelte svelte-routing svelte-v3
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/tienpv222/svelte-hash-router
- Owner: tienpv222
- License: mit
- Created: 2019-06-13T23:50:43.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-10T22:03:49.000Z (almost 2 years ago)
- Last Synced: 2024-10-12T21:49:29.374Z (2 months ago)
- Topics: router, routing, svelte, svelte-routing, svelte-v3
- Language: JavaScript
- Homepage: https://tienpv222.github.io/svelte-hash-router
- Size: 457 KB
- Stars: 44
- Watchers: 2
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# svelte-hash-router
[](https://github.com/sveltejs/svelte)
[](https://www.npmjs.com/package/svelte-hash-router)
[](https://travis-ci.org/pynnl/pug2svelte)
[](https://github.com/pynnl/svelte-hash-router/blob/master/LICENSE)
[](https://github.com/pynnl/svelte-hash-router)
Simple Svelte 3 hash based router with global routes.
Demo: https://tienpv222.github.io/svelte-hash-router
Demo REPL: https://svelte.dev/repl/47eaf2b35f4f4c98b533031f3b749c89?version=3.32.2
## Install
```
npm i -D svelte-hash-router
```
## Usage
First, set the `routes` schema before the root component.
```javascript
// index.js
import { routes } from 'svelte-hash-router'
import App from './App.svelte'
import Home from './Home.svelte'
import About from './About.svelte'
routes.set({
'/home': Home,
'/about': About
})
export default new App({ target: document.body })
```
Then use `Router` inside.
```svelte
import Router from 'svelte-hash-router'
```
Or more simple:
```javascript
// index.js
export default new Router({ target: document.body })
```
### Nested routes
```javascript
// schema
{
'/': {
$$component: MainLayout,
'home': Home,
'networking': {
$$component: NetworkingLayout,
'/github': Github,
'/facebook': Facebook
}
},
'*': NotFound
}
```
Then just simply use `Router` for each level.
```svelte
```
```svelte
A social networking
```
If `$$component` in the parent is omitted:
```javascript
// schema
{
'/': {
'home': Home,
'about': About
}
}
// will act the same as
{
'/home': Home,
'/about': About
}
```
Except that in the first schema, `/` is an individual route, has its own data and can be looped for children routes when needed. See [`routes`](#the-routes-store).
## Schema
Root paths must start with a `/` or if using wildcard, `*`.
```javascript
import { routes, Router } from 'svelte-hash-router'
routes.set({
'/home': Home,
'*': NotFound
})
export default new Router({ target: document.body })
```
An object of options can be passed. All properties starting with `$$` will be treated as options, the rest will be seen as nested routes. All options are saved as none-enumerable. `$$component` is a reserved option.
```javascript
{
'/home': HomeComponent,
'/about': {
// options
$$component: AboutComponent,
$$name: 'About me',
$$customOption: 'any',
// nested routes
'/biography': BiographyComponent,
'/hobbies': HobbiesComponent
}
}
```
### Params
Get params of current active route with the params store.
```javascript
// schema
{
'/books/:id': BookComponent,
'/authors/:name/novels/:title': NovelComponent
}
// Svelte component
import { params } from 'svelte-hash-router'
// /books/123
$params.id === '123'
// /authors/John/novels/Dreams
$params.name === 'John'
$params.title === 'Dreams'
```
Same with query.
```javascript
// Svelte component
import { query } from 'svelte-hash-router'
// /book?id=123&title=Dreams
$query.id === '123'
$query.title === 'Dreams'
```
### Wildcard
__*The order of schema does matter*__. Whichever route matching first will be rendered. Wildcard `*` matches anything, so it is usually put at the end. Wilcard is collected in `params` as `_`.
```javascript
// schema
{ '/book/*': BookComponent }
// /book/123?title=Dreams
$params._ === '123' // not catch query
```
### url-pattern
This library uses the nice package [url-pattern](https://github.com/snd/url-pattern), check it out for more syntaxes.
## Redirect
Redirect routes by using a string instead of a Svelte component, or if passing options object, use `$$redirect`. The redirect path must be an asbolute path.
```javascript
{
'/home': Home,
'/networking': {
'/github': GithubComponent,
// redirect using string syntax
'*': '/networking/github'
},
// redirect using options object
'*': {
$$redirect: '/home'
}
}
```
## The `routes` store
After the first schema setup, `routes` becomes readonly. The following reserved properties are added for each route:
- `$$pathname` the exact path as in schema define
- `$$href` full path including `#` at the beginning
- `$$stringify` a function to generate string from params. Check out [url-pattern stringify](https://github.com/snd/url-pattern#stringify-patterns)
- `$$pattern` url-pattern object
Since they are __*non-enumarable*__, you can easily loop for just nested routes when needed.
```svelte
import { routes, active } from 'svelte-hash-router'
$: links = Object.values($routes['/books']['/comedy'])
{#each links as e}
{e.$$name}
{/each}
.active { color: blue; }
```
The store `active` is the current active route. If you want to check if a parent route has an active child route, use the store `matches`. It is an array including all the parents of the active route and itself.
```svelte
import { matches } from 'svelte-hash-router'
A route containing params can be stringified.
```svelte
```
Standard links to new pages should be preceded by a '#' symbol :
```svelte
```
### [CHANGELOG](CHANGELOG.md)
### [LICENSE: MIT](LICENSE.md)