Question

我正面临这个问题，我的应用程序中的路由无法正常工作...为了更好的可读性，我省略了一些现在不需要的代码，我将其重命名为my元素。我们先来看看代码，然后我会解决这个问题：

MY-定制frame.html

...
<app-location route="{{route}}" use-hash-as-path></app-location>
<my-application route="{{route}}"></my-application>
...

MY-application.html

...
<iron-selector selected="{{pageData.page}}" attr-for-selected="name" fallback-selection="home">

  <paper-icon-item name="home">
    <iron-icon src="/images/icon_home.png" item-icon slot="item-icon"></iron-icon>
  </paper-icon-item>

  <paper-icon-item name="subpage">
    <iron-icon src="/images/icon_subpage.png" item-icon slot="item-icon"></iron-icon>
  </paper-icon-item>

</iron-selector>
...

<app-route route="{{route}}" pattern="/:page" data="{{pageData}}" tail="{{pageTail}}"></app-route>

...
<iron-lazy-pages id="pages" load-async="true" class="fit" selected="[[pageData.page]]" attr-for-selected="data-page" restamp="true">
  <template data-page="home" is="iron-lazy-page" path="{{resolveUrl('../home-view.html')}}">
    <home-view></home-view>
  </template>
  <template data-page="subpage" is="iron-lazy-page" path="{{resolveUrl('../subpage-view.html')}}">
    <subpage-view></subpage-view>
  </template>
</iron-lazy-pages>
...

在home-view和subpage-view内，我还有一个处理页尾的app-route元素，就像在subpage-view中一样：

子页面-view.html

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

现在出现问题：

当用户进入该页面时，他被重定向到#/home（我在[{1}}中有一位观察者观察my-custom-frame并将route设置为route.path如果它是空的 - 我也有home中的后备：

MY-定制frame.html

iron-selector

现在一切正常。如果用户现在点击Polymer({ is: "my-custom-frame" properties: { route: { type: Object, observer: 'routeChanged', notify: true } }, _checkRoute: function() { if (this.route.path === '') { this.set("route.path", "/home"); } }, onRouteChanged: function() { this._checkRoute(); } } - 图标，则会将其重定向到subpage，在#/subpage内，我也会观察subpage-view并将其重定向到route。只要他留在#/subpage/list - 上下文中，这也可以正常工作。意味着，如果他点击subpage - 图标，他会被重定向到home，但#/home/list没有任何路由逻辑。它只是一个没有观察者，听众或其他任何东西的静态页面。

之后，没有任何真正的工作，用户被迫重新加载页面或手动切断尾随的网址部分（home-view），以便再次浏览页面。

我现在正在寻找解决方案几小时和几天，但我无法弄明白......

如果我的解释像是一个谜，请随意提出任何问题; - ）

感谢任何帮助，谢谢！

更新

我将代码缩减为minium，但这是一个有效的例子。您可以在GitHub上签出代码，运行/list并使用以下代码重现

打开polymer serve
首页已被选中。
点击子页面，网址会按预期更改为http://localhost:8080
点击主页，网址将更改为#/subpage/childone/list，符合预期
再次点击子页面，看看网址更改为#/home

Answer 1

您可以尝试将this.set("route.path", "/home");更改为location.assign("#/home")

Answer 2

我现在自己解决了（而且 - 老实说 - 真的很容易）：

在我的subpage-view.html我只需要替换

行

if(this.route.path === "") {

这一个：

if(this.route.path === "" && this.route.prefix === "/subpage") {

然后按预期工作。

感谢您的帮助。

铁选择器/ app-route：奇怪的行为

2 个答案: