Polymer 聚合物路线/铁页不工作？

我只是在试用聚合物1.0。我发现

approute

/

iron pages

不起作用。在路线之间导航似乎不会显示正确的视图。不确定哪部分出错：

在主文件中：

<app-drawer-layout>
  <app-location route="{{route}}"></app-location>

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

  <app-drawer>
    <main-drawer></main-drawer>
  </app-drawer>

  <app-header-layout>
    <app-header>
      <paper-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div class="title">
          Expenses App
        </div>
      </paper-toolbar>

      <iron-pages selected="[[view]]">
        <expenses-dashboard name="dashboard" route="{{subroute}}"></expenses-dashboard>
        <expenses-settings name="settings" route="{{subroute}}"></expenses-settings>
      </iron-pages>
    </app-header>
  </app-header-layout>
</app-drawer-layout>

对于

，我应该使用

routeData.view

还是

view

？我两次都试了，但似乎都没有改变什么

---

上的代码您的代码中有一些问题

由于您的

.selected

属性绑定到未定义的属性（“视图”），

不会更改其页面。在

中，因为用户可能会意外导航到与现有页面不对应的URL（例如，
https://mypage.com/#/non-现有页面
）

您的

menuTap（）

函数将

window.location

设置为原始路径，这会显著刷新页面。您可以通过使用散列路径来避免页面刷新，其中URL的预期子路径前缀为

（例如

https://mypage.com/#/settings

）

对于散列路径，请配置

：

非常有用。
routeData
是一个可以包含多个项目的字典。所以你应该使用

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="expenses-dashboard">
  <template>
    <h1>Dashboard</h1>
  </template>

  <script>
    Polymer({
      is: 'expenses-dashboard'
    });
  </script>
</dom-module>

<iron-pages selected="[[routeData.view]]">

<iron-pages selected="foo" attr-for-selected="name">
  <div name="foo"></div>
  <div name="bar"></div>
</iron-pages>

<iron-pages selected="[[routeData.view]]" attr-for-selected="name" fallback-selection="foo">
  <div name="foo"></div>
  <div name="bar"></div>
</iron-pages>

Polymer({
  // menuTap(e) { ... }  // <-- ES6
  menuTap: function(e) { ... }
});

<app-location use-hash-as-path route="{{route}}">