Avoiding page reload after redirect

Question

Using Polymer 0.4.2 & app-router .

This is my routing table

 <app-router>

    <app-route path="/" import="landing/landing-page.html"></app-route>

    <app-route path="/balance" import="balance/balance-view.html"></app-route>
    <app-route path="/balance/:year/:month" import="balance/balance-view.html"></app-route>
    <app-route path="/balance/:year/:month/:day" import="balance/day-view/day-view.html"></app-route>

    <app-route path="*" import="landing/landing-page.html"></app-route>

</app-router>

When /balance is called, I need to determine the current year & month and do a redirect to /balance/year/month . I have tried both router.go() and window.location to do this redirect.

If I do so, the balance-view component will get included a second time below the first instance, causing the layout to break. The only way I currently see to fix that is window.location.reload() . However, this causes a nasty delay in the applications flow.

Where lies the issue & how can it be solved?

Answer 1

After some struggling, I got it working:

Same app-router conf:

 <app-router>

  <app-route path="/" import="landing/landing-page.html"></app-route>

  <app-route path="/balance" import="balance/balance-view.html"></app-route>
  <app-route path="/balance/:year/:month" import="balance/balance-view.html"></app-route>
  <app-route path="/balance/:year/:month/:day" import="balance/day-view/day-view.html"></app-route>

  <app-route path="*" import="landing/landing-page.html"></app-route>

</app-router>

And then, in balance/balance-view.html :

<polymer-element name="balance-view" attributes="year month">
  <template>
    <h1>Balance view</h1>
    <h2>Year: {{year}}</h2>
    <h2>Month: {{month}}</h2>
  </template>
  <script>   
    Polymer("balance-view", {
      domReady: function() {
        console.log(this.pathArg1);
        if (this.year === undefined) {
          var d = new Date();
          var month = new Array();
          month[0] = "January"; month[1] = "February"; month[2] = "March"; month[3] = "April";
          month[4] = "May"; month[5] = "June"; month[6] = "July"; month[7] = "August";
          month[8] = "September"; month[9] = "October"; month[10] = "November"; month[11] = "December";
          var currentYear =  d.getFullYear();
          var currentMonth = month[d.getMonth()];
          document.querySelector('app-router').go('/balance/'+currentYear+'/'+currentMonth);
        }
      }
    });
  </script>
</polymer-element>

In the domReady fuction, if I detect that no year has been passed, I calculate the current year and month and I do:

document.querySelector('app-router').go('/balance/'+currentYear+'/'+currentMonth);

You can see it running in this Plunker , the code is here .

Hope it helps!