子路由的聚合物应用程序路由问题

Question

我想在这方面寻求您的帮助： 我有一个具有以下结构的应用程序：

路线：

<my-app>
    - <my-application>
    - <my-admin>
          - <my-adminlogin>
          - <my-workplace>

问题是我正在尝试使用 app-route 元素进行应用路由：

<my-app>元素：

<app-location route="{{route}}"></app-location>
    <app-route
        route="{{route}}"
        pattern="/:page"
        data="{{routeData}}"
        tail="{{subroute}}">
    </app-route>
    <iron-pages role="main" selected="[[page]]" attr-for-selected="name">
        <my-application name="application"></my-application>
        <my-admin name="admin"></my-admin>
    </iron-pages>

聚合物脚本是：

properties: {
        page: {
          type: String,
          reflectToAttribute: true,
          observer: '_pageChanged'
        },
      },
      observers: [
        '_routePageChanged(routeData.page)'
      ],
      _routePageChanged: function(page) {
        this.page = page || 'application';
      },
      _pageChanged: function(page) {
        // load page import on demand.
        this.importHref(
          this.resolveUrl('my-' + page + '.html'), null, null, true);
      }

当我进入应用程序时，我的应用程序元素会启动，当我在 url “/admin”中写入时，应用程序会自动显示 my-admin 元素。 我想知道如何继续使用应用程序的其余部分，因为我需要在“my-admin”元素中执行完全相同的操作，以默认显示“my-adminlogin”，如果我写“/admin/workplace”则显示我的工作场所元素。 我真的不知道我是否必须在<my-admin>element 中创建一个新的<app-route> 元素，或者我是否必须使用子路由，但在那种情况下我还没有找到使用子路由的方法。

感谢您对此提供的任何帮助，谢谢。

Answer 1

您必须将子路由传递给<my-admin>

<my-admin name="admin" route={{subroute}}></my-admin>

然后它成为<my-admin>内部的主要路线