Polymer 2.0 app-router子路由器无法正常工作

Question

我是聚合物的新手，对于如何在PWA应用程序中有效执行子路由有点困惑。我有一个结构，并希望了解它是如何做到的。我尝试使用youtube教程，但它没有用。

app结构 -

my-app
 + landing-page (/landing)
 + dashboard-page (/dashboard)
 + transaction-page (/transactions) 
     + list-page (/transastions/list)
     + detail-page (/transastions/detail/:id)

我在my-app.html中创建了app-routes

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

<iron-pages
        selected="[[page]]"
        attr-for-selected="name"
        fallback-selection="not-found-404"
        role="main">
      <landing-page name="landing-page"></landing-page>
      <dashboard-page name="dashboard-page"></dashboard-page>
      <anynew-page name="anynew-page"></anynew-page>
      <not-found name="not-found-404"></not-found>
      <transactions-page name="transactions-page" route="{{subroute}}"></transactions-page>

在交易页面

中

<dom-module id="transactions-page">

    <style include="shared-styles">
  :host {
    display: block;
    padding: 10px;
  }
</style>

<app-data key="userData" data="{{storedUser}}"></app-data>

<app-route  route="{{route}}"
              pattern="/tranlist"
            data="{{storeData}}"
                tail="{{subRoute}}"
            active="{{listActive}}"></app-route>

<app-route  route="{{subRoute}}"
                pattern="/trandetail/:Id"
            data="{{indvidualStoreData}}"
            active="{{detailActive}}"></app-route>

<list-page    viewtype="{{view.type}}"
              activestate={{listActive}}></list-page>

<detail-page  viewtype="{{view.type}}"
              individualdataId={{indvidualStoreData.Id}}
              activestate="{{detailActive}}"></detail-page>

<div class="card">
  <div class="circle">SP</div>
  <h1>This is a Transactions Page</h1>
</div> 

 <iron-selector selected="{{view.type}}" attr-for-selected="data-page">
    <a data-page="list" href="{{route}}/transaction/list">List</a>
    <a data-page="detail" href="{{subRoute}}/:id">Detail</a>
 </iron-selector>

list-page.html和detail-page.html是聚合物元素，简单的铁-ajax调用，只有youtube polycast＃46的副本 - 碳路由。

列表page.html中

<link rel="import" href="../../iron-ajax/iron-ajax.html">
<dom-module id="list-page">
<template>
<style>
  :host {
    display: none;
  }
  :host([active]) {
    display: block;
  }
</style>

<iron-ajax
  auto
  url="[[_computeURL(viewtype)]]"
  handle-as="json"
  last-response="{{listData}}"></iron-ajax>

<template is="dom-repeat" items="{{listData.posts}}">
  <div class="post">
    <a href="#/[[viewtype]]/storeid/[[item.id]]">
      <img src="[[item.img]]" alt="[[item.img_alt]]" />
      <h2>[[item.title]]</h2>
      <p>Lorem ipsum </p>
    </a>
  </div>
</template>
 </template>
 <script>

class ListPage extends Polymer.Element {
static get is() { return 'list-page'; }
static get properties() {
  return {
    active: {
      type: Boolean,
      value: false,
      reflectToAttribute: true
    };
  }
}
   _computeURL(viewtype) {
   return `data/list/${viewtype}.json`;
// API construct list url http://localhost:3000/transaction
  }

  window.customElements.define(ListPage.is, ListPage);
 }
 </script>
 </dom-module>

细节page.html中

<link rel="import" href="../../iron-ajax/iron-ajax.html">
<dom-module id="detail-page">
 <template>
  <style>
  :host {
    display: none;
  }
  :host([active]) {
    display: block;
  }
  p {
    line-height: 33.18px;
    white-space: pre-wrap;
  }
  </style>
  <iron-ajax
    auto
    url="[[_computeURL(individualdataId)]]"
    handle-as="json"
    last-response="{{postContent}}"></iron-ajax>
    <h2>[[postContent.title]]</h2>
     <p>[[postContent.intro_text]]</p>
  <img src="[[postContent.img]]" alt="[[postContent.img_alt]]" />
  <p>[[postContent.body_text]]</p>
 </template>
 <script>

  class DetailPage extends Polymer.Element {
static get is() { return 'detail-page'; }
static get properties() {
  return {
    active: {
      type: Boolean,
      value: false,
      reflectToAttribute: true
    };
  }
}
   _computeURL(individualdataId) {
   return `data/detail/${individualdataId}.json`;
// API construct list url http://localhost:3000/transaction/id
  }

  window.customElements.define(DetailPage.is, DetailPage);
  }