聚合物 Vaadin 网格布线答案

【问题标题】：Polymer Vaadin grid routing聚合物 Vaadin 网格布线
【发布时间】：2017-12-14 01:22:12
【问题描述】：

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

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

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

有没有办法在 vaadin 网格之外做到这一点？

【问题讨论】：

标签： polymer vaadin vaadin-grid

【解决方案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。根据路径更新当前 URL

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

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

【讨论】：