My goal is to provide a default view in my route which is also accessible via URL. To accomplish that goal, I bound the selected properties of paper-tabs
(an iron-selector
implementation) and iron-pages
to routeData.view
<!-- parent route: app/route -->
<app-route id="route"
route="{{route}}"
pattern="/:view"
data="{{routeData}}"
></app-route>
<paper-tabs id="tabs"
selected="{{routeData.view}}"
fallback-selection="foo"
attr-for-selected="name">
<paper-tab link name="incomplete" hidden></paper-tab>
<paper-tab link name="foo">FOO</paper-tab>
<paper-tab link name="bar">BAR</paper-tab>
</paper-tabs>
<iron-pages id="pages"
selected="[[routeData.view]]"
attr-for-selected="id">
<div id="incomplete">INCOMPLETE view</div>
<div id="foo">FOO view</div>
<div id="bar">BAR view</div>
</iron-pages>
When a user navigates to this route (let's call it /app/route/
, the fallbackSelection
on paper-tabs
binds up to routeData
, and adds foo/
to the window.location
(/app/route/foo
).
This adds history to window.history: if the user got to this view by clicking a link, pressing the back button will not return them to the previous page. In this case, they have to press the back button three times in order to get back.
How can I provide an addressed default view for my subroute without breaking the back button?