0

我正在使用 Polymer 并尝试设置应用路由器。我无法让应用程序将用户定向到登录页面。

我已经单独测试了所有其他部分，所以我知道我的页面会呈现。

<dom-module id="app-body">
    <template>
        <app-location route="{{route}}" use-hash-as-path></app-location>
        <app-route route="{{route}}" pattern="/:page" data="{{data}}"></app-route>

        <iron-pages id="content-pages" selected="{{data.page}}" attr-for-selected="name">
          <landing-page name="landing"></landing-page>
          <lobby-page name="lobby"></lobby-page>
        </iron-pages>

</template>

    <script>
        window.addEventListener('WebComponentsReady', function() {
            Polymer({
                is: 'app-body',
                properties: {
                    data: {
                        type: Object,
                        value: function() {
                              return {
                                page: '/landing'
                              };
                            notify: true
                        }   
                    }
                },

                observers: [
                  '_onRoutePathChanged(route.path)'
                ],

                _onRoutePathChanged: function(path) {
                  // If we do not have an initial URL, we redirect to /landing
                  if (!path) {
                    this.set('route.path', '/landing/');
                  }
                }
            });
        });
    </script>
</dom-module>
4

1 回答 1

1

首先，您似乎有与我相同的误解，即要使属性向下转移，您需要 notify true。事实并非如此，您只需要 notify true 从您的元素导出到使用它的父元素。在您的情况下，这是不需要的。

可能发生的情况是 routeData 在元素初始化期间被设置为{page: '/landing'}。在这一点上，route不是active所以routeData没有映射回route.path并反馈app-location到url。当它最终映射回来时，没有任何变化，routeData所以观察者不会触发告诉你它已经改变。

于 2016-09-25T16:05:30.253 回答