聚合物应用程序-路由子路由不会随着路由的改变而更新。
我的问题是链接应用程序路由。最初，我认为这个bug来自我的应用程序，但我用一个简单的例子重新创建了它。该问题源于首先访问与子路由匹配的url，然后更改路由，使其与子路由不匹配。
我不能使用聚合物cdn基标签，因为它将改变路由行为。如果您复制并粘贴运行bower init; bower install --save PolymerElements/app-route; python3 -m http.server;的代码，那么它应该运行示例代码。
问题
- 单击指向
#/tree/maple的链接会导致routeData.collection = 'tree'，subrouteData.uuid =‘枫树’。这是正确的，并按照预期的行为。 - 接下来，单击指向
#/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>It item会得到优先考虑。
回答 1
Stack Overflow用户
发布于 2016-11-15 00:14:30
实验表明，当路由不再匹配时，<app.route>会更改subroute，但不会清除subrouteData (可能这是该元素中的一个bug )。但是，<app-route>总是在active=true (即路由匹配)时设置data，因此在读取data之前必须检查active标志。
例如，只有当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...
}
}https://stackoverflow.com/questions/40595767
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号