# lit-elem-router

> Simple, lightweight router written to be used with web components. Supports lazy loading.

Latest version **1.3.2** (published 2021-01-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install lit-elem-router
pnpm add lit-elem-router
yarn add lit-elem-router
bun add lit-elem-router
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.2 |
| Published | 2021-01-04 |
| First published | 2020-09-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 11.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Mikheil Tektumanidze |
| Maintainers | mishotek |
| Keywords | router, web-components, lazy, lit, element, lit-element, components, routing, route |

## Links

- npm: https://www.npmjs.com/package/lit-elem-router
- Repository: https://github.com/mishotek/lit-elem-router
- Homepage: https://github.com/mishotek/lit-elem-router#readme
- Issues: https://github.com/mishotek/lit-elem-router/issues
- npm.io page: https://npm.io/package/lit-elem-router

## Dependencies (1)

- [lit-element](https://npm.io/package/lit-element.md) ^2.4.0

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 1.3.2 (latest) — 2021-01-04
- 1.3.1 — 2021-01-04
- 1.3.0 — 2021-01-04
- 1.2.2 — 2020-12-06
- 1.2.1 — 2020-12-05
- 1.2.0 — 2020-12-05
- 1.1.1 — 2020-12-04
- 1.1.0 — 2020-12-04
- 1.0.13 — 2020-12-01
- 1.0.12 — 2020-11-29
- 1.0.11 — 2020-11-29
- 1.0.10 — 2020-11-29
- 1.0.9 — 2020-11-29
- 1.0.8 — 2020-11-29
- 1.0.7 — 2020-11-29
- … 7 more at https://npm.io/package/lit-elem-router/versions

## README

# lit-elem-router
Simple, lightweight router written to be used with web components. Supports lazy loading.

## Usage
Install the package
```
npm i lit-elem-router
```
Import router in your component class
```javascript
import 'lit-elem-router';
```
Create a layout for your page
```html
<lit-router>
    <lit-route path="/" tag-name="app-home"></lit-route>
    <lit-route path="/register" tag-name="app-register"></lit-route>
    <lit-route path="/login" tag-name="app-login"></lit-route>
</lit-router>
```

You can nest routers
```html
<lit-router>
    <lit-route path="/" tag-name="app-home"></lit-route>
    <lit-route path="/auth" tag-name="app-auth"></lit-route>
</lit-router>
```
Now in AppAuth.js you can have
```html
<lit-router>
    <lit-route path="/auth/register" tag-name="app-register"></lit-route>
    <lit-route path="/auth/login" tag-name="app-login"></lit-route>
<lit-router>
```


Lazy loading can be done by listening to the route activation:
```html
<lit-router>
    <lit-route path="/"
               tag-name="app-home-page"
               @activate="${this._loadHome}"></lit-route>
    <lit-route path="/register"
               tag-name="app-register-page"
               @activate="${this._loadRegister}">
    </lit-route>
</lit-router>
```
Now you can load your components:
```javascript
function _loadHome() {
    import('./pages/app-home-page');
}
```

If you want a default route, that will be activated if nothing else matches the path, you can use ```**``` as a fragment in your path
```html
<lit-router>
    <lit-route path="/home" tag-name="app-home-page"></lit-route>
    <lit-route path="/register" tag-name="app-register-page"></lit-route>
    <lit-route path="/**" tag-name="app-404-page"></lit-route>
</lit-router>
```

No navigate using js, you can use static functions provided by Router
```javascript
// To go to /register
Router.navigate('/register');
// To return to the prev location
Router.back();
```

Router supports parameters in url like node or angular:
```html
<lit-router>
    <lit-route path="/user/:id" tag-name="app-home-page"></lit-route>
</lit-router>
```

Feel free to open an issue if you need help, or you found a bug

---
_Source: https://npm.io/package/lit-elem-router · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._