Typescript 如何使用vaadin路由器以历史可以解释的方式更改web组件中的状态？

我有一个相当简单的LitElement自定义组件，我希望它有一个“编辑”状态。由于我已经从服务器获得了所有信息，我不想仅仅为了显示编辑屏幕或重新加载当前组件而加载一个新组件，但我确实想这样做，以便用户按下“后退”按钮时退出编辑状态。我不知道如何做到这两个

简单的例子：

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

@customElement（'my-element'））
类MyElement扩展了LitElement{
@属性（{attribute:false}）私有_editing=false；
@属性（{attribute:false}）私有_数据！：数据；
公共connectedCallback（）{
super.connectedCallback（）；
//正在装货。。
}
公共渲染（）{
返回此文件。\u
？html`
`
：html`
编辑
`;
}
private\u onEditClick（e:事件）{
这是._editing=true；
}
}

注意，我使用的是路由，以下方法有问题

• 使用编辑按钮向url添加#编辑（通过链接或使用

  Route.go

  或

  window.location.href

  ）更改位置）会导致路由器重新连接组件，触发数据重新加载和状态重置
• 尝试侦听“popstate”时，我在vaadin router之后收到通知，因此在我修改其行为之前，它会更改到以前的位置
• 使用onBeforeLeave，我无法区分返回的尝试和从菜单中执行不同页面的合法请求

---

我想您的路由配置中有类似的内容

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

您应该修改它并使用

操作

而不是

组件

，在操作中您需要返回组件的相同实例

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

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

---

这就是我有的是的。这样做的负面影响是什么？显然，构造函数只被调用一次，因此任何初始化状态都必须在connectedCallback中，还有其他状态吗？例如，我是否需要清除断开连接时的任何大型状态？是的，您只有一个实例，因此，构造函数只调用一次。当再次访问路由时，路由器将分离/重新连接组件，因此您可以使用那些连接的断开的回调。路由器中也有回调