https://github.com/aaronshaf/html-router
Drop-in router using web components
https://github.com/aaronshaf/html-router
custom-elements router web-components
Last synced: about 1 year ago
JSON representation
Drop-in router using web components
- Host: GitHub
- URL: https://github.com/aaronshaf/html-router
- Owner: aaronshaf
- License: mit
- Created: 2018-08-15T15:45:59.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-29T02:10:04.000Z (over 7 years ago)
- Last Synced: 2025-04-30T06:09:01.710Z (about 1 year ago)
- Topics: custom-elements, router, web-components
- Language: JavaScript
- Homepage:
- Size: 36.1 KB
- Stars: 10
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Drop-in router.
## Usage
### Hash router
```html
```
#### Render first match ([example](https://aaronshaf.github.io/html-router/examples/hash-switch.html))
```html
```
```html
Foo
Bar
Not found
```
#### Standalone routes ([example](https://aaronshaf.github.io/html-router/examples/hash-route.html))
```html
```
```html
Home
Foo
Bar
```
### Pathname router
```html
```
#### Render first match ([example](https://aaronshaf.github.io/html-router/examples/pathname-switch.html))
```html
```
```html
Foo
Bar
Not found
```
#### Standalone routes ([example](https://aaronshaf.github.io/html-router/examples/pathname-route.html))
```html
```
```html
Foo
Bar
```
## Access match params
Custom elements that are children of a route or switch can access match data at `this.match`.
## Prevent flash of undefined content
```html
hash-switch:not(:defined),
pathname-switch:not(:defined) {
visibility: hidden;
}
```
## Web components polyfill
```html
```
## See also
* [element-router](https://github.com/filipbech/element-router)