使用 app-route 正确完成子路由答案

【问题标题】：Subroutes done right with app-route使用 app-route 正确完成子路由
【发布时间】：2016-11-15 11:56:58
【问题描述】：

就路由而言，我的 app.js 中有这个：

<app-location route="{{route}}"></app-location>

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

在入门工具包中，我观察routeData.page 以确保this.page 已同步。

 ...
 observers: [
    '_routePageChanged(routeData.page)',
  ],

  _routePageChanged: function(page) {
    this.page = page;
  }
  ...

然后我创建两个页面，用 iron-pages 选择：

  <iron-pages id="pageSelector" role="main" selected="[[page]]" attr-for-selected="name" fallback-selection="view404">

      <my-offers-made
          title="Offers made"
          name="offers-made"
          user-data="{{userData}}"
          site-info="{{siteInfo}}"
          route="{{subRoute}}">
        </my-offers-made>

    <my-chat
          title="Chat"
          name="chat"
          user-data="{{userData}}"
          site-info="{{siteInfo}}"
          route="{{subRoute}}">
        </my-chat>
  </iron-pages>

注意：潜在错误：他们都共享subRoute。

my-chat 可能会显示活动对话列表或特定用户的消息。所以，在my-chat 我有：

<app-route
  route="{{route}}"
  pattern="/:userId"
  data="{{routeData}}"
  active="{{active}}">
</app-route>

然后，my-chat 只是根据userId 检查要显示的内容。

my-offers-made 有不同的标签。所以：

<app-route 
  route="{{route}}"
  pattern="/:tab"
  data="{{routeData}}">
</app-route>

它会显示正确的标签。

问题是如果我在my-offers-made 中更改标签，然后转到my-chat，routeData.userid 被来自my-offers-made 的标签名称污染 因为他们分享了@987654337@。

我显然做错了什么非常。我是不是一定要为每条路线补上不同的尾巴，这样它们才不会互相污染？

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

<app-route route="{{route}}" pattern="/page/chat" data="{{routeData}}" tail="{{subRouteChat}}"></app-route>

<app-route route="{{route}}" pattern="/page/my-offers-made" data="{{routeData}}" tail="{{subRouteOffersMade}}"></app-route>

...？还是我在这里错过了一些非常大的东西？

【问题讨论】：

标签： javascript routing polymer

【解决方案1】：

问题似乎是由于您的孩子<app-route> 元素具有相同的patterns，因此<app-route>s 总是有匹配的route 和routeData。一种解决方法是使每个孩子的patterns 不同（例如，插入一个简单的前缀）：

// my-chat: prefix userid with /u/
<app-route route="{{route}}"
           pattern="/u/:userId"
           data="{{routeData}}">
</app-route>

// my-offers-made: prefix tab name with /t/
<app-route route="{{route}}"
           pattern="/t/:tab"
           data="{{routeData}}">
</app-route>

HTMLImports.whenReady(() => {
  Polymer({
    is: 'my-app',
    properties: {
      route: {
        type: Object,
        value: () => ({ path: '/page/offers-made/t/foo' })
      }
    },
    _gotoMyOffers: function() {
      this.set('route.path', '/page/offers-made');
    },
    _gotoChat: function() {
      this.set('route.path', '/page/chat');
    }
  });
  
  Polymer({
    is: 'my-offers-made'
  });
  
  Polymer({
    is: 'my-chat'
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-input/paper-input.html">
  <link rel="import" href="app-route/app-route.html">
  <link rel="import" href="iron-pages/iron-pages.html">
</head>

<body>
  <my-app></my-app>

  <dom-module id="my-app">
    <template>
      <span>Enter <code>/page/offers-made/t/<b>TABNAME</b></code> or <code>/page/chat/u/<b>USERID</b></code></span>
      <paper-input value="{{route.path}}" label="Location"></paper-input>

      <app-route route="{{route}}"
                 pattern="/page/:page"
                 data="{{routeData}}"
                 tail="{{subRoute}}">
      </app-route>
      <button on-tap="_gotoChat">Show Chat</button>
      <button on-tap="_gotoMyOffers">Show Offers</button>

      <iron-pages id="pageSelector" role="main" selected="[[routeData.page]]" attr-for-selected="name" fallback-selection="view404">

        <my-offers-made
            title="Offers made"
            name="offers-made"
            user-data="{{userData}}"
            site-info="{{siteInfo}}"
            route="{{subRoute}}">
        </my-offers-made>

        <my-chat
            title="Chat"
            name="chat"
            user-data="{{userData}}"
            site-info="{{siteInfo}}"
            route="{{subRoute}}">
        </my-chat>

        <div name="view404">Sorry, page not found!</div>
      </iron-pages>
    </template>
  </dom-module>

  <dom-module id="my-offers-made">
    <template>
      <app-route route="{{route}}"
                 pattern="/t/:tab"
                 data="{{routeData}}">
      </app-route>
      <h2>my-offers-made</h2>
      <paper-input label="routeData.tab" value="{{routeData.tab}}"></paper-input>
    </template>
  </dom-module>

  <dom-module id="my-chat">
    <template>
      <app-route route="{{route}}"
                 pattern="/u/:userId"
                 data="{{routeData}}"
                 active="{{active}}">
      </app-route>
      <h2>my-chat</h2>
      <paper-input label="routeData.userId" value="{{routeData.userId}}"></paper-input>
    </template>
  </dom-module>
</body>

codepen

【讨论】：