问题

Question

我的问题涉及链接app-route。最初我认为这个bug来自我的应用程序，但我用一个简单的例子重新创建它。问题来自于首先访问与子路由匹配的URL，然后更改路由以使其与子路由不匹配。

我不能使用Polymer cdn基本标记，因为它会改变路由的行为。如果您复制并粘贴代码运行bower init; bower install --save PolymerElements/app-route; python3 -m http.server;它应该运行示例代码。

问题

点击链接到#/tree/maple导致routeData.collection ='tree'，subrouteData.uuid ='maple'。 这是正确的，并按预期行事
接下来点击#/tree的链接会导致routeData.collection ='tree'，subrouteData.uuid ='maple'。 注意没有任何变化

请注意，即使路径更改为#/tree ，子路径也不会更新。这是我对app-route的理解的问题吗？

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">

  <link rel="import" href="./bower_components/app-route/app-route.html">
  <link rel="import" href="./bower_components/app-route/app-location.html">
  <link rel="import" href="./bower_components/polymer/polymer.html">
</head>

<body>
  <x-example></x-example>
</body>

</html>

<dom-module id="x-example">
  <template>
    <style>
    </style>
    <app-location route="{{route}}" use-hash-as-path></app-location>
    <app-route route="{{route}}" pattern="/:collection" data="{{routeData}}" tail="{{subroute}}"></app-route>
    <app-route route="{{subroute}}" pattern="/:uuid" data="{{subrouteData}}"></app-route>

    <h1>Path</h1> 
    <p>route: [[routeData.collection]]</p>
    <p>subroute: [[subrouteData.uuid]]</p>

    Visit: [In Order]
    <a href="#/tree/maple">[2] Collection [TREE] UUID [MAPLE]</a> ->
    <a href="#/tree">[1] Collection [TREE]</a> 
  </template>

  <script>
    Polymer({
      is: "x-example",
    });
  </script>
</dom-module>

可能的解决方案，但不是干净的

<app-route route="{{route}}" pattern="/:collection" data="{{listData}}" active="{{listActive}}"></app-route>
<app-route route="{{route}}" pattern="/:collection/:uuid" data="{{itemData}}" active="{{itemActive}}"></app-route>

item会得到偏好。

Answer 1

实验表明，当路线不再匹配时，<app.route>会更改subroute但不会清除subrouteData（可能这是该元素中的错误）。但是，<app-route>始终在data（即路线匹配）时设置active=true，因此您必须在阅读active之前检查data标记。< / p>

例如，如果active为true，您只能显示一个元素（并在false时将其从DOM中删除）：

<template is="dom-if" if="[[subrouteActive]]" restamp>
  <my-el uuid="[[subrouteData.uuid]]"></my-el>
</template>

如果active为false：

，该元素可以在内部跳过处理

<my-el uuid="[[subrouteData.uuid]]" active="[[subrouteActive]]"></my-el>

// my-el script
_processUuid: function() {
  if (!this.active) return;
  // do something with this.uuid...
}

或者元素可以观察active并重置false：

// my-el script
_onActiveChanged: function(active) {
  if (!active) {
    // reset...
  }
}

聚合物app-route子路由不会随路由更改而更新

问题

可能的解决方案，但不是干净的

1 个答案: