Question

我有一个vaadin网格，其中有信息。我希望网格不是打开一个对话框，就像任何其他链接一样路由到新页面。

我正在使用app-route，但我不明白如何进入下一页。

每一行都有自己的ID，这就应该在路由中传递。我希望每一行在点击时都有自己的链接。因此，每个id应该是localhost：8000 / dashboard / {{id}}，方法是调用构建页面的相同元素，具体取决于传递的id。

有没有办法在vaadin网格中执行此操作？

Answer 1

使用<vaadin-grid>执行此操作的一种方法是观察网格的activeItem属性，并在每次更改时更新URL：

<强> 1。观察activeItem网格属性

<vaadin-grid items="[[pages]]" aria-label="Navigation Links"
  on-active-item-changed="_onActiveItemChanged">

  <vaadin-grid-column>
    <template class="header">Grid Menu</template>
    <template>[[item.title]]</template>
  </vaadin-grid-column>

</vaadin-grid>

<强> 2。根据所选网格项定义新路径

_onActiveItemChanged(e, detail) {
  const activeItem = detail.value;
  if (activeItem) {
    // if a grid item is selected
    this.path = `/dashboard/${activeItem.id}`;
  }
}

第3。根据路径更新当前网址

（用于客户端路由）<app-location path="[[path]]"></app-location>。
（用于服务器端路由）window.location.pathname = this.path;。

此示例显示<vaadin-grid> 4，但同样的原则也适用于任何其他版本的网格。

聚合物Vaadin网格布线

1 个答案: