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

Question

我在我的应用程序中使用 <app-route> 元素。我想在 URL

中捕获 queryParams

例如

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

我写的代码：

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

当我使用上面的URL 我得到

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

我在期待

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

和

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

我查看了聚合物文档中的示例，但没有帮助。我错过了什么？
我在期待什么错误吗？ queryParams 应该如何工作？

如有任何帮助，我们将不胜感激。

Answer 1

绑定到<app-location>.queryParams获取查询参数：

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

另请注意，<app-location>.route 有一个包含查询参数的内部属性：__queryParams。从技术上讲，您可以使用它，但要注意它可能在下一个版本中无法使用。（即 this.route.__queryParams === this.queryParams）。

codepen

Answer 2

你得到答案的原因是 url 是错误的。 #部分在最后。

尝试url

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

线索在页面参数中，查询参数似乎已添加到页面参数中。它们没有，但浏览器只是认为它们是散列的一部分，并在 window.location.hash 中传递它们。 app-location 哈希部分的解析在 '/' 上拆分，因此认为整个事情都是 :page 模式的一部分。

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

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

routing

polymer

query-parameters