避免在重定向后重新加载页面

Question

使用聚合物0.4.2和app-router。

这是我的路由表

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

当调用/balance时，我需要确定当前的年份和月份，并重定向到/balance/year/month。我已经尝试过router.go()和window.location来做这个重定向。

如果我这样做，balance-view组件将第二次包含在第一个实例之下，导致布局中断。我目前看到的解决这个问题的唯一方法是window.location.reload()。然而，这会在应用程序流中造成严重的延迟。

问题出在哪里&如何解决呢？

Answer 1

经过一番努力，我让它正常工作了：

相同的app-router配置：

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

然后，在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>

在domReady函数中，如果我检测到没有传递任何year，我会计算当前年份和月份，然后执行以下操作：

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

你可以看到它在this Plunker中运行，代码是here。

希望它能帮上忙！