如何使用lit访问vaadin-router的location.params？

Question

根据Vaadin 提供的文档和演示，路由参数应该绑定到 location.params。提供的示例使用聚合物，当我使用 LitElement 时，location.params 未定义。除了使用 JavaScript 结合 Lit 来解析 url 以提取使用的 url :parameter 之外，还有其他技巧吗？

Answer 1

您可以通过覆盖生命周期回调来访问它onBeforeEnter：

@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;
  }

}