Question

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

中捕获queryParams

e.g。

本地主机：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>

当我使用上述网址时

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

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

尝试网址

本地主机：8080 /富=栏＆安培;巴兹= qux＃/测试

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

Answer 2

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

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

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

codepen

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

2 个答案: