Question

我的app.js就路由而言：

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

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

与入门套件一样，我观察routeData.page以确保同步此页面。

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

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

然后我创建两个页面，用铁页面选择：

  <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 ，因为他们共享subRoute。

我显然做了非常错误的事情。我是否必须为每条路线制作不同的尾巴，以免它们相互污染？

<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>

...？或者我错过了一些非常庞大的东西？

Answer 1

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

// 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>

＆＃13;

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'
  });
});

＆＃13;

<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>

＆＃13;

codepen

使用app-route

1 个答案: