在聚合物的<app-route>元素中的query-params

Question

我<app-route>在我的应用程序中使用该元素.我想在URL中捕获queryParams

例如

本地主机:8080 /#/测试富=栏&巴兹= 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）。

码笔

Answer 2

你得到答案的原因是网址错误.#部分结束了.

试试网址

本地主机:8080 /富=栏&巴兹= qux#/测试

线索在页面参数中,看起来查询参数已添加到页面参数中.他们没有,但浏览器只是认为它们是哈希的一部分并将它们传递进去window.location.hash.app-location解析哈希部分拆分'/'所以认为整个事情是:页面模式的一部分.