0

就在我想知道 app-route 是如何工作的时候，我遇到了一个问题，让我怀疑我对这个元素的理解是否正确。

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

并且因为app-route的route属性，和它的data属性是同步的，下面代码中paper-tabs改变data属性会导致app-route的route属性改变，导致app-location更新浏览器网址。

但是，由于我没有在纸张选项卡中使用 fallback-selection 属性，因此浏览http://localhost会将路径设置为“/”，因此不会显示主页。

所以我想我可以用 ready 函数中的代码重定向 URL。但不幸的是， route.path 确实发生了变化，但 URL 没有。

这是为什么？我该怎么做才能通过函数手动重定向路由？或者换句话说：为什么通过 paper-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>
4

1 回答 1

0

添加一个带有观察者的页面属性，如果 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';
    }
于 2017-03-14T03:01:59.250 回答