Polymer app-route redirect via function issue

Question

just when I thought I figured out how app-route is working, I run into an issue that let me doubt that my understanding of this element is correct.

From what I understood, it's the responsibility of app-location to keep the browser URL and the value of route in sync. If one of them changes app-location takes care that the other one is changing as well.

And because the route attribute of app-route, is in sync with it's data attribute, changes of the data attribute by the paper-tabs in the code below causes a change in the route attribute of app-route causes the app-location to update the browser URL.

However since I didn't use the fallback-selection attribute in paper-tabs the surfing to http://localhost will set the path to '/' and therefore not showing the home-page.

So I thought I could redirect the URL with the code in the ready function. But unfortunately the route.path indeed changes but the URL doesn't.

Why is that? What do I have to do to redirect the route manually via a function? Or in other words: Why does a change of routeData.subpage via the paper-tabs element causes a redirect, and a change of routeData.subpage from the function not?

<dom-module id="polymer-app">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <app-location route="{{route}}"></app-location>

    <app-route id="ar"
      route="{{route}}"
      pattern="/:subpage"
      data="{{routeData}}"
      tail="{{routeTail}}"
      active="{{routeActive}}">
    </app-route>

    <header>
      <paper-tabs attr-for-selected="name" selected="{{routeData.subpage}}">
        <paper-tab name="home">Home</paper-tab>
        <paper-tab name="settings">Settings</paper-tab>
      </paper-tabs>
    </header>

    <section id="main">
      <iron-pages attr-for-selected="name" selected="[[routeData.subpage]]">
        <home-page name="home"></home-page>
        <settings-page name="settings"></settings-pagina>
      </iron-pages>
    </scection>
  </template>

  <script>
    Polymer({

      is: 'polymer-app',

      properties: {
        route: Object,
        routeData: Object,
        routeTail: Object,
        routeActive: Boolean,
      },

      ready: function() {
        if (this.route.path == "/") {
          this.set('routeData.subpage', 'home');
          console.log(this.routeData);
          console.log(this.route);
        }
      },

    });

  </script>
</dom-module>

Answer 1

Add a page property with an observer that will either assign it the current value (based on the URL) or a default value if the URL path is empty

  static get properties() {
    return {
      page: {
        type: String,
        reflectToAttribute: true,
        observer: '_pageChanged',
      },
  }

  static get observers() {
    return [
      '_routePageChanged(routeData.page)',
    ];
  }

    _routePageChanged(page) {
    // If no page was found in the route data, page will be an empty string.
    // Default to 'home' in that case.
    this.routeData.subpage = page || 'home';
    }