在应用程序路由中寻找不同的模式匹配

Question

我正在使用 Polymer CLI 创建一个应用程序。我正在利用 Encapsulated Routing with Elements and 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

在应用程序路由中寻找不同的模式匹配

Looking for different pattern match in app-route

polymer

polymer-1.0