Query-params in the <app-route> element

Question

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

eg.

local: 8080 / # / test = Foo bar & Baz = QUX

Code I wrote:

 <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

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

I expected

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

and

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

I looked at an example in the polymer documentation, but that didn't help. What am I missing?
Am I expecting something wrong? How does Params request work?

Any help would be appreciated.

Answer 1

The reason you get the answer is because the url is incorrect. # Part ends.

Try URL

local: 8080 / Foo = bar & Baz = QUX # / test

The key is in the page parameter, where, it seems, the request parameters are added to the page parameter. They did not do this, but the browser simply considers them to be part of the hash and passes them to window.location.hash . app-location hash part is parsed into '/', so it is believed that all of this is part of the page template.

Answer 2

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

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

Note that <app-location>.route has an internal property that contains query parameters: __queryParams . Technically, you could use this with the caveat that it might not be suitable in the next version. (i.e. this.route.__queryParams === this.queryParams ).

codepen

Answer 3

Please, if someone can help me understand navigation in polymer 3 starter kit, I do not