Question

我在my-app.html：

中有这个

  <app-location route="{{route}}"></app-location>
  <app-route route="{{route}}" pattern="/:page" data="{{routeData}}" tail="{{subRoute}}"></app-route>

这是一个相当标准的路由。

其中一个子页面my-gigs.html，动态加载（ala PSK）并包含：

    <iron-pages id="pageSelector" role="main" selected="[[page]]" attr-for-selected="name" fallback-selection="view404">
      ...
      <my-gig
        name="gig"
        route="{{subRoute}}"
      </my-gig>

      <my-city
        name="city"
        route="{{subRoute}}"
      </my-city>

在my-gig.html中，我希望能够根据网址查看特定的演出。所以，我有：

<app-route route="{{route}}" pattern="/:gigId" data="{{routeDataGig}}" active="{{activeGig}}"></app-route>

问题在于，当我转到应用程序中的其他页面时（例如/city/perth-au，显示从my-city.html），上面的路由是活动（！）。它会gigId，perth-au（这是完全错误的，因为它显然不是有效的ID）。

我迷路了。每当我遇到路由问题之前，我都会使用active标志来检查路由是否实际活动。在此问题中，我遇到了问题，因为/city/perth-au和/gig/445454545将同时满足my-gig.html中的路由。

我做错了什么......？

在我通过my-gig.html：

签入“解决”这个问题的那一刻

         <iron-ajax
            id="ajax"
            auto
            url="{{_makeUrl(routeDataGig.gigId)}}"
            handle-as="json"
            debounce-duration="300"
            last-response="{{response}}"
          ></iron-ajax>

然后：

  _makeUrlIfNotInfo: function(gigId) {
    if( this.route.prefix != '/gig') return;
    return '/stores/gigs/' + gigId;
  }

Answer 1

我用于此问题的解决方案是在处理slug之前检查页面是否实际显示。我利用<iron-pages>.selectedClass（默认值为iron-selected）并在<app-route>.data上的观察者中检查该类。 <iron-pages>.selectedAttribute是另一种选择，但需要明确配置。

例如：

// template
<app-route route="{{route}}" pattern="/:gigId" data="{{routeDataGig}}" active="{{activeGig}}"></app-route>

// script
_routeDataChanged: function(routeDataGig) {
  const isPageSelected = this.classList.contains('iron-selected');
  this.gigId = isPageSelected && routeDataGig.gigId;
}

两个不同页面处于活动状态的路由问题

1 个答案: