2.1.3 • Published 4 years ago
@lit-kit/router v2.1.3
@lit-kit/router
A simple router
Installation:
npm i @lit-kit/component @lit-kit/di @lit-kit/router lit-html
Example:
import { Component, registerElement } from '@lit-kit/component';
import { Route, RouteCtxRef, RouteCtx, ActiveOptions, registerRouterElements } from '@lit-kit/router';
registerRouterElements();
const routes: Route[] = [
// Eager component route
{ path: '/', component: () => document.createElement('page-1') },
// Lazy component route
{ path: '/bar', component: () => import('page-2.component').then(() => document.createElement('page-2')) },
// Child Paths
{ path: '/parent(.*)', component: () => document.createElement('parent-component') }
// this would be in the child component outlet
{ path: '/parent/child', component: () => document.createElement('child-component') }
]
export interface AppState {
title: string;
}
@Component<AppState>({
template(state) {
return html`
<router-link .path=${'/'} .activeOptions=${new ActiveOptions({ pathMatch: 'full' })}>
Go To Foo
</router-link>
<router-link .path=${'/bar'}>Go To Bar</router-link>
<section>
<router-outlet .routes=${routes}></router-outlet>
</section>
<footer>The Footer</footer>
`;
}
})
export class AppComponent {
constructor(@RouteCtxRef private route: RouteCtx) {}
connectedCallback() {
console.log(this.route.value);
this.route.onChanges(ctx => {
console.log(ctx);
})
}
}
customElements.define('app-root', defineElement(AppComponent));
2.1.3
4 years ago
2.1.2
4 years ago
2.1.1
4 years ago
2.0.5
4 years ago
2.0.3
4 years ago
2.0.2
4 years ago
2.0.4
4 years ago
2.0.1
4 years ago
2.0.0
4 years ago
2.0.0-alpha.2
4 years ago
2.0.0-alpha.1
4 years ago
2.0.0-alpha.0
4 years ago
1.4.1
4 years ago
1.4.0
4 years ago
1.3.0
4 years ago
1.2.0
4 years ago
1.1.0
4 years ago
1.0.0
4 years ago
1.0.0-beta.31
4 years ago
1.0.0-beta.30
4 years ago
1.0.0-beta.28
4 years ago
1.0.0-beta.29
4 years ago
1.0.0-beta.27
4 years ago
1.0.0-beta.26
4 years ago
1.0.0-beta.25
4 years ago
1.0.0-beta.24
4 years ago
1.0.0-beta.23
4 years ago