聚合物,在链式app-route元素上改变路由

时间:2016-07-24 20:36:51

标签: polymer polymer-1.0

我在具有以下结构的项目中使用来自https://github.com/PolymerElements/app-route的app-route元素:

包含以下代码的my-app元素:

<app-location route="{{route}}"></app-location>
<app-route
  route="{{route}}"
  pattern="/:page"
  data="{{routeData}}"
  tail="{{subroute}}">
</app-route>

<iron-pages selected="[[page]]" attr-for-selected="name">
  <store-main-page 
    name="loja" 
    route="{{subroute}}" 
    categories="[[categories]]">
  </store-main-page>
  ...
</iron-pages>
...

store-main-page元素:

<app-route
  route="{{route}}"
  pattern="/:page"
  data="{{routeData}}"
  tail="{{subroute}}">
</app-route>

<iron-pages selected="[[page]]" attr-for-selected="name">
  <category-page 
    name="categoria" 
    route="{{subroute}}" 
    selected-category="{{selectedCategory}}"
    cart="{{cart}}">
  </category-page>
  ...
</iron-pages>
...

因此,访问/路径会显示欢迎页面并访问/loja/categoriamy-app会致电store-main-page,呼叫category-page。< / p>

我的问题是,我想在显示store-main-page之前对用户进行身份验证,如果用户未经过身份验证,请将其重定向到/上的欢迎页面。有没有办法使用app-route

执行此操作

我发现使用app-route更改页面的唯一方法是调用

this.set('route.path', 'path');

但这对链式路由不起作用,在我的情况下,这会导致重定向到/loja/路径,这不是我想要的。

如何更改父元素的路线?这可能吗?

1 个答案:

答案 0 :(得分:3)

我刚才发现iron-location只是app-routeiron-location之间的接口。

所以我解决了在我的子元素中添加path并更改其 <iron-location id="ironLocation"></iron-location> ... </template> <script> ... attached: function() { if (!userAuth()) { this.$.ironLocation.set('path', '/'); } else { ... } } ... 属性的问题。

确切的代码是:

{{1}}

我不知道这是否是理想的解决方案,但它确实有效。