如何设置 `route` 参数和加载新页面

Question

我正在尝试使用 Polymer Shop App 框架将 paper-button 值传递给默认路由器。 app-location 和 app-route 组件在应用程序 Shell 和主页中。我不确定如何将数据传递到 route 对象并刷新视图。

应用Shell

<app-location route="{{route}}"></app-location>
<app-route
  route="{{route}}"
  pattern="/:page"
  data="{{routeData}}"
  tail="{{subroute}}"></app-route>

<iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible">
  <shop-home name="home"></shop-home>
  <shop-detail name="detail"></shop-detail>
</iron-pages>

首页

<paper-button id="item" value="[[item.name]]" on-tap="viewItem">[[item.name]]</paper-button>

...

viewItem() {
  this.route.path = '/detail';
  this.routeData = '/inventory/' + this.$.item.value;
}

P.S.

<a href$="/detail/inventory/[[item.name]]"> successfully redirects to the `detail` page and loads the data.

Answer 1

为了将数据传递给路由对象，包装 a tag 项目而不是按钮元素，在下面的示例中，我没有尝试将您的所有代码都转换为此。只是我试图解释我的意思：（注意：我为一个应用程序在这个主题上工作了 2-3 周，它现在运行良好。）我将尝试添加一个演示。

<a href="/detail/inventory/[[item.name]]"><div>[[item.name]]</div></a>

而不是：

 <paper-button id="item" value="[[item.name]]" on-tap="viewItem">[[item.name]]</paper-button>

如何设置 `route` 参数和加载新页面

How to Set `route` parameter and Load New Page

routes

polymer

polymer-2.x