目次へ移動

翻訳ドキュメントの管理ページ

ルーティング要素はプレリリースです。 APIが変更される可能性があります。

クライアントサイドにおけるルーティングのために、App Toolboxは、<app-route>要素を使用してモジュラールーティングを提供します。モジュラールーティングとは、アプリケーションのすべてのルートに対して中央リポジトリを用意するのではなく、個々のコンポーネントはルートの一部を管理し、残りを他のコンポーネントに管理を委譲することを意味します。

なぜモジュラールーティングなのですか？ <app-route>とモジュラールーティングの背景については、Encapsulated routing with elementsを参照してください。

app-routeのインストール

Bowerを使ってapp-routeパッケージをインストールします。：

bower install --save PolymerElements/app-route

2.0リリース候補(RC)の場合は、2.0-previewブランチを使用します。：

bower install --save PolymerElements/app-route#2.0-preview

ルーティングの追加

初めにすべきことは、あなたのアプリのルートがどのように要素にマップされるか決めることです。例えば、いくつかのメインビューを持つアプリケーションがあるとしましょう。：

View	Route
User profile view	`/profile/:user_id`
Message list	`/messages`
Message view	`/detail/:message_id`

メインのアプリケーション要素と、タブごとに分割されたビューコンポーネントがあったとします。アプリケーション要素がトップレベルのルートを管理(表示するビューの一つを選択)し、残りのルートの管理をアクティブなビューに委譲します。app要素のテンプレートには次のようなマークアップが含まれるでしょう。：

<!-- app-location binds to the app's URL -->
<app-location route="{{route}}"></app-location>

<!-- this app-route manages the top-level routes -->
<app-route
    route="{{route}}"
    pattern="/:view"
    data="{{routeData}}"
    tail="{{subroute}}"></app-route>

<app-location>要素は双方向データバインディングを提供する単なるwindow.locationのプロキシです。一つの<app-location>要素が、トップレベルの<app-route>要素とURLバーのステータスをバインドします。

<app-route>要素は、現在のrouteとpattern（:view部分はパラメータを表します）の照合を行います。パターンに一致すると、ルートはアクティブになり、すべてのURLパラメータがdataオブジェクトに追加されます。今回の例でいうと、パス/profile/tinaはトップレベルのルートと一致し、routeData.viewがprofileに設定されます。残りのルート（/tina）がtailになります。

ルートに基づき、アプリは<iron-pages>を使って表示するビューを選択できます：

<!-- iron-pages selects the view based on the active route -->
<iron-pages selected="[[routeData.view]]" attr-for-selected="name">
  <my-profile-view name="profile" route="{{subroute}}"></my-profile-view>
  <my-message-list-view name="messages" route="{{subroute}}"></my-message-list-view>
  <my-detail-view name="detail" route="{{subroute}}"></my-detail-view>
</iron-pages>

仮に、現在のURLが/profile /tinaの場合、ルートが/tinaに設定された<my-profile-view>要素が表示されます。このビューには、ルートを処理のため独自の<app-route>が組み込まれています。例えば、ユーザーデータをロードする場合には：

<app-route
    route="{{route}}"
    pattern="/:user_id"
    data="{{routeData}}"></app-route>
<iron-ajax url="{{_profileUrlForUser(routeData.user_id)}}
           on-response="handleResponse" auto>

Routeオブジェクト

routeオブジェクトには二つのプロパティがあります。：

prefix：上位の<app-route>要素でマッチしたパス。トップレベルの<app-route>要素の場合、prefixは常に空の文字列になります。
path：routeオブジェクトが照合しているパス。

tailオブジェクトは、ルート内の次の<app-route>に渡すルートを表すrouteオブジェクトでもあります。

例えば、現在のURLが/users/bob/messagesで、トップレベルの<app-route>のパターンが/users/:userの場合：

routeオブジェクトは、：

{
  prefix: '',
  path: '/users/bob/messages'
}

tailオブジェクトは、：

{
  prefix: '/users/bob',
  path: '/messages'
}

また、routeDataオブジェクトは、：

{
  user: 'bob'
}

ルートの変更

<app-route>を使用した場合、現在のURLを変更するには二つの方法があります。

リンク：リンクをクリックすると、<app-location>はナビゲーションイベントをインターセプトし、そのrouteプロパティを更新します。主要なナビゲーションにリンクを使用するのは良い考えです。なぜなら、検索エンジンがインデックスを作成する際にアプリケーションの構造の把握に役立つためです。
ルートの更新：routeオブジェクトは読み書き可能なので、双方向データバインディングまたはthis.setを使用してルートを更新できます。 routeとrouteDataの両方のオブジェクトはこれらの方法で操作できます。例えば：

this.set('route.path', '/search/');

あるいは：

this.set('routeData.user', 'mary');

ルート変更に応じたアクション

前のセクションでは、ルートとそのデータへのデータバインディングを示しましたが、ルートが変化した際に特定のコードを実行する必要があるかもしれません。オブザーバーを使用すれば、ルートやデータの変更に応た処理を行うことが可能です。：

ルートオブザーバーの例

static get observers() {
  return [
    '_routeChanged(route.*)',
    '_viewChanged(routeData.view)'
  ]
}

_routeChanged(changeRecord) {
  if (changeRecord.path === 'path') {
    console.log('Path changed!');
  }
}
_viewChanged(view) {
  // load data for view
}

参考情報

ブログ記事Encapsulated routing with elements
API reference