Search code examples
routespolymerquery-string

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

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.

Solution

  • 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.