ルーティング要素はプレリリースです。 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
}