title: Subroutes done right with app-route
body: <p>I have this in my app.js in terms of routing:</p>
  
  <pre><code>&lt;app-location route="{{route}}"&gt;&lt;/app-location&gt;
  
  &lt;app-route 
    route="{{route}}"
    pattern="/page/:page"
    data="{{routeData}}"
    tail="{{subRoute}}"&gt;
  &lt;/app-route&gt;
  </code></pre>
  
  <p>As in the starter kit, I observe <code>routeData.page</code> to make sure that this.page is synced.</p>
  
  <pre><code> ...
   observers: [
      '_routePageChanged(routeData.page)',
    ],
  
    _routePageChanged: function(page) {
      this.page = page;
    }
    ...
  </code></pre>
  
  <p>I then create two pages, selected with iron-pages:</p>
  
  <pre><code>  &lt;iron-pages id="pageSelector" role="main" selected="[[page]]" attr-for-selected="name" fallback-selection="view404"&gt;
  
        &lt;my-offers-made
            title="Offers made"
            name="offers-made"
            user-data="{{userData}}"
            site-info="{{siteInfo}}"
            route="{{subRoute}}"&gt;
          &lt;/my-offers-made&gt;
  
      &lt;my-chat
            title="Chat"
            name="chat"
            user-data="{{userData}}"
            site-info="{{siteInfo}}"
            route="{{subRoute}}"&gt;
          &lt;/my-chat&gt;
    &lt;/iron-pages&gt;
  </code></pre>
  
  <p><strong>NOTE</strong>: Potential mistake: they both share <code>subRoute</code>.</p>
  
  <p><code>my-chat</code> might display either a list of active conversations, or messages with a specific user. So, in <code>my-chat</code> I have:</p>
  
  <pre><code>&lt;app-route
    route="{{route}}"
    pattern="/:userId"
    data="{{routeData}}"
    active="{{active}}"&gt;
  &lt;/app-route&gt;
  </code></pre>
  
  <p>Then, <code>my-chat</code> just checks what to display depending on <code>userId</code>.</p>
  
  <p><code>my-offers-made</code> has different tabs. So:</p>
  
  <pre><code>&lt;app-route 
    route="{{route}}"
    pattern="/:tab"
    data="{{routeData}}"&gt;
  &lt;/app-route&gt;
  </code></pre>
  
  <p>And it will display the right tab.</p>
  
  <p><strong>THE PROBLEM</strong> is that if I change tab in <code>my-offers-made</code>, and then go to <code>my-chat</code>, <code>routeData.userid</code> <em>is polluted with the tab name from <code>my-offers-made</code></em> since they share <code>subRoute</code>.</p>
  
  <p>I am obviously doing something <em>very</em> wrong. Do I absolutely have to make up different tails for each route, so that they don't pollute each other?</p>
  
  <pre><code>&lt;app-route route="{{route}}" pattern="/page/:page" data="{{routeData}}"&gt;&lt;/app-route&gt;
  
  &lt;app-route route="{{route}}" pattern="/page/chat" data="{{routeData}}" tail="{{subRouteChat}}"&gt;&lt;/app-route&gt;
  
  &lt;app-route route="{{route}}" pattern="/page/my-offers-made" data="{{routeData}}" tail="{{subRouteOffersMade}}"&gt;&lt;/app-route&gt;
  </code></pre>
  
  <p>...? Or am I missing something totally huge here?</p>