Script does not reset second-level and further patterns on route "back" change

[AlexNasonov]

Description

Created app-location and app-route components:

<app-location route="{{route}}"></app-location>
        <app-route
                route="{{route}}"
                pattern="/:section"
                data="{{sectionData}}"
                tail="{{sectionPage}}">
        </app-route>
        <app-route
                route="{{sectionPage}}"
                pattern="/:page"
                data="{{pageData}}"
                tail="{{details}}">
        </app-route>
        <app-route
                route="{{details}}"
                pattern="/:details"
                data="{{detailsData}}">
        </app-route>

Added a few buttons:

<a href="/company/about"><paper-button>about</paper-button></a>
<a href="/company/services"><paper-button>services</paper-button></a>
<a href="/"><paper-button>home</paper-button></a>

Created an observer:

observers: [
               '_sectionChanged(route)'
            ],
            _sectionChanged: function (route) {
                console.log(route);
                console.log(this.sectionData);
                console.log(this.pageData);
            }

Expected outcome

Click buttons one after another:

Object {prefix: "", path: "/company/about", __queryParams: Object}
Object {section: "company"}
Object {page: "about"}

Object {prefix: "", path: "/company/services", __queryParams: Object}
Object {section: "company"}
Object {page: "services"}

Object {prefix: "", path: "/", __queryParams: Object}
Object {section: ""}
undefined

Actual outcome

Object {prefix: "", path: "/company/about", __queryParams: Object}
Object {section: "company"}
Object {page: "about"}

Object {prefix: "", path: "/company/services", __queryParams: Object}
Object {section: "company"}
Object {page: "services"}

Object {prefix: "", path: "/", __queryParams: Object}
Object {section: ""}
Object {page: "services"}

Browsers Affected

• [х] Chrome
• [ ] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10

[TimvdLippe]

This was the issue also reported at https://github.com/PolymerElements/app-route/pull/77#discussion-diff-63082376

[rictic]

This is intentional, as a gambit to reduce invisible dom changes on navigation. Quoting my response from the thread Tim links:

Consider the scenario where we've got three pages: /user /user/:username/profile and /watch/:videoId with <user-page> and <watch-page> as top level siblings, and <user-page> using tail to delegate to a <user-profile-page>.

When navigating from /user/alice/profile to /watch/panda-sneeze we have to do a certain amount of work to set up the panda-sneeze video. From a performance standpoint, it would be nice if we could do the minimum of changes inside <user-profile-page> at the same time, as it's invisible to the user at that point.

[rictic]

It is a bit surprising, but it does give an almost-free performance win. If it does cause a lot of problems for people in practice though we can revisit the decision.

[TimvdLippe]

Maybe an opt-out could fix the issues? E.g. have the performance by default, but you can opt-out of it. I have been encountering this issue quite some times now :(