如何使用 vaadin-router 以历史可以解释的方式更改 Web 组件中的状态？

Question

我有一个相当简单的 LitElement 自定义组件，我希望它具有 "editing" 状态。由于我已经从服务器获得了所有信息，我不想仅仅为了显示编辑屏幕或重新加载当前组件而加载新组件，但我 do 想要使按下后退按钮的用户退出编辑状态。我不确定如何同时执行这两项操作。

简单示例：

@customElement('my-element')
class MyElement extends LitElement {

  @property({ attribute: false }) private _editing = false;
  @property({ attribute: false }) private _data!: Data;

  public connectedCallback() {
    super.connectedCallback();
    // Loading stuff..
  }

  public render() {
    return this._editing
      ? html`
          <editing-control .data=${this._data}></editing-control>
        `
      : html`
          <details-control .data=${this._data}></details-control>
          <button @click=${this._onEditClick}>Edit</button>
        `;
  }

  private _onEditClick(e: Event) {
    this._editing = true;
  }
}

请注意，我正在使用 Vaadin router 进行路由，但以下方法存在问题

让编辑按钮将#editing 添加到 url（通过将其设置为 link 或使用 Route.go 或 window.location.href 更改位置）会导致路由器重新连接组件，触发数据的重新加载和状态的重置
尝试监听 'popstate'，我在 vaadin-router 之后收到通知，因此在我修改其行为之前它会更改到之前的位置
使用 onBeforeLeave，我无法区分返回尝试与从菜单转到不同页面的合法请求

Answer 1

我想你的路由配置中有这样的东西

{
  path: '/foo',
  component: 'my-foo-component'
}

您应该修改它并使用 action 而不是 component，在您需要 return 相同组件实例的操作中

my fooElement = document.createElement('my-foo-component');
....

{
  path: '/foo',
  action: () => fooElement;
}

如何使用 vaadin-router 以历史可以解释的方式更改 Web 组件中的状态？

How can you change state in a web component in a way that can be interpreted by history using vaadin-router?

vaadin

typescript

lit-element