聚合物应用程序路由通过功能问题重定向

Question

只是我以为我弄清楚应用程序如何工作时，我遇到了一个问题，让我怀疑我对此元素的理解是正确的。

据我了解，将浏览器URL和路由的价值保持在同步的责任。如果其中一个更改应用程序，请注意另一个正在改变。

并且由于App-Route的路由属性与其数据属性同步，因此以下代码中的Paper-Tabs对数据属性的更改导致App-Route的路由属性的更改导致App-更新浏览器URL的位置。

但是，由于我没有在纸上使用后返回选项属性，因此向http：//localhost进行冲浪会将路径设置为'/'，因此未显示主页。

所以我认为我可以在就绪功能中使用代码重定向URL。但是不幸的是，路线确实发生了变化，但URL没有。

为什么？我该怎么做才能通过功能手动重定向路线？或换句话说：为什么通过纸-TABS元素更改Routedata.subpage会导致重定向，而Routedata.subpage的更改不是？

<dom-module id="polymer-app">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <app-location route="{{route}}"></app-location>
    <app-route id="ar"
      route="{{route}}"
      pattern="/:subpage"
      data="{{routeData}}"
      tail="{{routeTail}}"
      active="{{routeActive}}">
    </app-route>
    <header>
      <paper-tabs attr-for-selected="name" selected="{{routeData.subpage}}">
        <paper-tab name="home">Home</paper-tab>
        <paper-tab name="settings">Settings</paper-tab>
      </paper-tabs>
    </header>
    <section id="main">
      <iron-pages attr-for-selected="name" selected="[[routeData.subpage]]">
        <home-page name="home"></home-page>
        <settings-page name="settings"></settings-pagina>
      </iron-pages>
    </scection>
  </template>
  <script>
    Polymer({
      is: 'polymer-app',
      properties: {
        route: Object,
        routeData: Object,
        routeTail: Object,
        routeActive: Boolean,
      },
      ready: function() {
        if (this.route.path == "/") {
          this.set('routeData.subpage', 'home');
          console.log(this.routeData);
          console.log(this.route);
        }
      },
    });
  </script>
</dom-module>

Answer 1

添加一个带有观察者的页面属性，该属性将其分配当前值（基于URL）或默认值，如果URL路径为空

  static get properties() {
    return {
      page: {
        type: String,
        reflectToAttribute: true,
        observer: '_pageChanged',
      },
  }
  static get observers() {
    return [
      '_routePageChanged(routeData.page)',
    ];
  }
    _routePageChanged(page) {
    // If no page was found in the route data, page will be an empty string.
    // Default to 'home' in that case.
    this.routeData.subpage = page || 'home';
    }