聚合物，在链接的应用程序路由元素上更改路由

Andrew Pacífico 发表于 Dev

安德鲁·太平洋

我在具有以下结构的项目中使用来自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/categoria，该my-app调用store-main-page将调用category-page。

我的问题是，我想在显示之前store-main-page对用户进行身份验证，如果未通过身份验证，则将其重定向到上的欢迎页面/。有没有办法做到这一点app-route？

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

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

但这在链式路线上不起作用，就我而言，这将导致重定向到/loja/路径，这不是我想要的。

如何更改父元素上的路线？那可能吗？

安德鲁·太平洋

我刚刚发现这app-location只是iron-location和之间的接口app-route。

因此，我解决了将iron-location元素添加到子元素并更改其path属性的问题。

确切的代码是：

  <iron-location id="ironLocation"></iron-location>
...
</template>

<script>
...
  attached: function() {                    
    if (!userAuth()) {            
      this.$.ironLocation.set('path', '/');            
    } else {
      ...
    }                                      
  }
...

我不知道这是否是理想的解决方案，但是可以。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。