How to access the location.params of the vaadin-router using lit?

Question

According to the documentation and demos provided by Vaadin the route parameters should be bound to the location.params. The examples provided are using polymer, and when I use LitElement the location.params is undefined. Is there a trick other than to parse the url to extract the used url :parameter using JavaScript in combination with Lit?

Answer 1

You can access it by overriding the onBeforeEnter lifecycle callback:

@customElement('example-view')
export class ExampleView extends LitElement implements BeforeEnterObserver {

  @state()
  private user = '';

  render() {
    return html`
      <h1>Hello, ${this.user ? this.user : 'stranger'}</h1>
    `;
  }

  async onBeforeEnter(location: RouterLocation) {
    this.user = location.params.user as string;
  }

}