query-params in <app-route> element of polymer

Question

I am using the <app-route> element in my application. I want to capture the queryParams in the URL

e.g.

localhost:8080/#/test?foo=bar&baz=qux

The code I have written:

<app-location id="location" route="{{route}}" use-hash-as-path></app-location>
<app-route id="route"
        route="{{route}}"
        pattern="/:page"
        data="{{routeData}}"
        tail="{{subroute}}"></app-route>

when I use the above URL I get the

this.$.route.routeData.page = "test?foo=bar&baz=qux"
this.$.route.queryParams = {}

I was expecting

this.$.route.routeData.page = "test"

and

this.$.route.queryParams = {
   foo : "bar",
   baz : "qux"
}

I looked at the example in polymer documentation, but it did not help. What am I missing?
Am I expecting something wrong? How is queryParams supposed to work?

Any help would be appreciated.

Answer 1

Bind to <app-location>.queryParams to get the query parameters:

<app-location route="{{route}}" query-params="{{queryParams}}">

Note also that <app-location>.route has an internal property that contains the query parameters: __queryParams. Technically, you could use that with the caveat of it possibly being unusable in the next release. (i.e., this.route.__queryParams === this.queryParams).

codepen