Question

我使用Polymer CLI创建应用程序。我正在使用Encapsulated Routing with Elements和Step 1. Get set up尝试匹配以下模式：

/analyze/:p1

/analyze/:p1/:p2

/analyze/:p1/:p2/:p3

路由到3个不同的Web组件。

Answer 1

对于<app-route>元素，请设置以下属性：

pattern =您想要的路线模式
data =包含已解析路径的属性绑定

在你的情况下：

<app-route
  pattern="/analyze/:p1/:p2/:p3"
  data="{{routeData}}">
</app-route>

{{routeData}}将包含：

{
  p1: 'a',
  p2: 'b',
  p3: 'c'
}

<head>
  <base href="https://polygit.org/polymer+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="app-route/app-route.html">
  <link rel="import" href="paper-input/paper-input.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <app-route
          route="{{route}}"
          pattern="/analyze/:p1/:p2/:p3"
          data="{{routeData}}"
          tail="{{tail}}">
      </app-route>
    </template>
    <script>
      Polymer({
        is: 'x-foo',
        ready: function() {
          this.route = {path: "/analyze/a/b/c/d/e/f"};
          console.log('p1', this.routeData.p1);
          console.log('p2', this.routeData.p2);
          console.log('p3', this.routeData.p3);
          console.log('tail', this.tail.path);
        }
      });
    </script>
  </dom-module>
</body>

^jsbin

在app-route中寻找不同的模式匹配

1 个答案: