Question

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

根据我的理解，应用程序位置的责任是保持浏览器URL和路由的值同步。如果其中一个更改了app-location，那么另一个也会发生变化。

由于app-route的路由属性与其数据属性同步，因此下面代码中的paper-tabs对数据属性的更改会导致app-route的路由属性发生变化导致app-location更新浏览器URL。

但是，由于我没有在纸质标签页中使用后备选择属性，因此浏览到http://localhost会设置路径为＆＃39; /＆＃39;因此没有显示主页。

所以我想我可以使用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>

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';
    }

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

1 个答案: