Routing to landing page - polymer

Question

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>

Answer 1

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.