Question

我正在使用Polymer并试图获得app-router设置。我无法让应用将用户定向到目标网页。

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

<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

首先，您似乎有同样的误解，即要使属性向下传输，您需要通知true。事实并非如此，您只需要通知true从元素导出到使用它的父元素。在您不需要的情况下。

可能发生的是在元素初始化期间将routeData设置为{page: '/landing'}。此时route不是active，因此routeData未映射回route.path并通过app-location反馈到网址。当它最终映射回来时，routeData没有变化，因此观察者不会发出声音告诉你它已经改变了。

路由到登录页面

1 个答案: