聚合物<app-route>元素中的查询-仿射

Question

我正在应用程序中使用<app-route>元素。我想在网址中捕获queryParams

例如：

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

你得到答案的原因是网址是错的。#部分在结尾。

试试url

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

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

Answer 2

绑定到.queryParams以获取查询参数：

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

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

码页