1.0.1 • Published 3 years ago
@eboon/lit-router v1.0.1
@eboon/lit-router
A simple router for Lit using travelerjs. It also comes with links!
Usage
For using the router, you must create an array of routes, and send it as routes
property to lit-router
element.
// As we're using Lit, we don't need to import any variable, just the files.
import '@eboon/lit-router'
// The routes that the router will use.
const routes = [
{
// If the path matches, it will render the content.
path: '/',
content: html`<p>Hello world!</p>`
},
{
// Path with parameter, read below for more info.
path: '/user/@user',
content: html`<user-info></user-info>`
}
]
@customElement('your-element')
export class YourElement extends LitElement {
render() {
return html`
<lit-router .routes=${routes}></lit-router>
`
}
}
Parameters
In the above example we have the /user/@user
path. /user
is the route and @user
the param. If you want to get the params, you must get them from the getParams()
function.
import { getParams } from '@eboon/lit-router'
export class YourElement extends LitElement {
@state()
params = ''
// ...
// You can put it wherever you want, but firstUpdated is fine.
// Params won't change unless you move to another route.
firstUpdated() {
this.params = getParams()
}
// ...
}
Links
For using the links, use the router-link
element. You cand send the class
parameter to asign a custom class to the <a>
element inside the router-link
. In the rare case you also want to set an id
to the <a>
, use the anchor-id
property (if you use the normal id
it goes to the router-link
element).
// ...
render() {
return html`
<router-link
to='/some/path'
class='my-link-class'
anchor-id='some-link'
>
Home
</router-link>
`
}
// ...