路由至登录页面

Question

我正在使用聚合物，并试图获得应用程序路由器设置。我无法让应用程序将用户定向到登录页面。

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

<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>

Answer 1

首先，你似乎和我有同样的误解，认为要让属性向下转移，你需要notify true。事实并非如此，您只需通知true即可将元素从您的元素导出到使用它的父元素。在您的情况下，这是不需要的。

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