iron-selector / app-route：奇怪的行为

Question

我遇到了一个问题，我的应用程序内部的路由无法正常工作...为了提高可读性，我省略了一些暂时不需要的代码并重命名了我的元素。先看看代码吧，后面再解决问题：

我的自定义-frame.html

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

我的-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（我在 my-custom-frame 中有一个观察者观察 route 并将 route.path 设置为 home 如果它是空的 - 我也有 iron-selector 中的后备）：

我的自定义-frame.html

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 没有任何路由逻辑。它只是一个静态页面，没有观察者、听众或其他任何东西。

在那之后，一切都不再有效，用户被迫重新加载页面或手动切断尾随 url 部分 (/list) 以便再次浏览页面。

我花了好几个小时和几天的时间寻找解决方案，但我想不出来...

如果我的解释像个谜，请随时提出任何问题;-)

感谢任何帮助，谢谢！

更新

我减少了我的代码，但这是一个有效的例子。您可以在 GitHub、运行 polymer serve 上检出代码并重现：

打开http://localhost:8080
主页已选中。
单击 子页面，URL 按预期更改为 #/subpage/childone/list
单击主页，URL 更改为 #/home，正如预期的那样
再次点击子页面可以看到，URL变成了#/home/childone/list

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") {

然后它按预期工作。

感谢您的帮助。

iron-selector / app-route：奇怪的行为

iron-selector / app-route: strange behaviour

polymer

polymer-1.0