CODEWITHSUNDEEP
polymerapp-router
David Price
David Price

Reputation: 170

Routing to landing page

I am using Polymer and trying to get the app-router setup. I cannot get the app to direct the user to the landing page.

I have tested all of the other pieces individually, so I know that my pages will render. 

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

Upvotes: 0

Views: 519

Answers (1)

akc42
akc42

Reputation: 5001

Firstly, you appear to have the same misconception I had, that to make properties transfer downwards you need notify true. That is not so, you only need notify true to export from your element to a parent element that uses it. In your case that is not needed.

What might be happening is that routeData gets set to {page: '/landing'} during your element initialization. At that point the route is not active so routeData is not mapped back to the route.path and fed back through app-location to the url. When it does eventually map back through, there is no change to routeData so the observer doesn't fire to tell you it has changed.

Upvotes: 1

Related Questions