查询 - 参数 <app-route> 聚合物元素

Question

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

eg

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. (ie, this.route.__queryParams === this.queryParams ).

codepen

Answer 2

The reason you get the answer you do is that the url is wrong. The # part comes at the end.

Try url

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

The clue is in the page parameter where it appears that the query params have been added to the page parameter. They haven't, but the browser just thinks they are part of the hash and passes them over in window.location.hash . app-location parsing of the hash part splits on '/' so thinks the whole thing is part of the :page pattern.