SPA モデルルーティング

AEM の単一ページアプリケーションの場合、アプリはルーティングを担当します。このドキュメントでは、ルーティングメカニズム、契約、使用可能なオプションについて説明します。

プロジェクトルーティング

アプリはルーティングを所有し、プロジェクトのフロントエンド開発者によって実装されます。このドキュメントでは、AEM サーバーから返されるモデルに固有のルーティングについて説明します。ページモデルのデータ構造は、基になるリソースの URL を反映します。フロントエンドプロジェクトでは、ルーティング機能を提供する任意のカスタムライブラリまたはサードパーティ製ライブラリを使用できます。ルートでモデルのフラグメントが予想されたら、PageModelManager.getData() 関数の呼び出しを行うことができます。モデルルートが変更された場合は、イベントをトリガーして、ページエディターなどのリッスンしているライブラリに警告する必要があります。

アーキテクチャ

詳しくは、 PageModelManager SPA Blueprint ドキュメントの節を参照してください。

ModelRouter

ModelRouter は、有効な場合、HTML5 の History API 関数 pushState および replaceState をカプセル化して、特定のモデルフラグメントが事前に取得されアクセス可能になることを保証します。次に、モデルが変更されたことを登録済みのフロントエンドコンポーネントに通知します。

手動と自動のモデルルーティング

ModelRouter は、モデルフラグメントの取得を自動化します。ただし、自動化された処理の常として、制限を伴います。必要に応じて、ModelRouter を無効にしたり、パスを無視するようにメタプロパティで設定したりできます（SPA ページコンポーネントのドキュメントでメタプロパティに関する節を参照）。フロントエンド開発者は、getData() 関数を使用して特定のモデルフラグメントを読み込むように PageModelManager に要求することで、独自のモデルルーティングレイヤーを実装することができます。

ルーティングのコントラクト

現在の実装では、SPA プロジェクトで様々なアプリケーションページへのルーティングに HTML5 の History API を使用することを前提としています。

設定

ModelRouter では、pushState 呼び出しと replaceState 呼び出しをリッスンしてモデルフラグメントをプリフェッチするので、モデルルーティングの概念をサポートしています。内部では、PageModelManager をトリガーして指定の URL に対応するモデルを読み込み、他のモジュールがリッスンできる cq-pagemodel-route-changed イベントを発生させます。

デフォルトでは、この動作は自動的に有効になっています。無効にするには、SPA で次のメタプロパティをレンダリングする必要があります。

<meta property="cq:pagemodel_router" content="disabled"\>

SPAのすべてのルートは、AEM内のアクセス可能なリソースに対応している必要があります ( 例：「 /content/mysite/mypage") PageModelManager ルートが選択されると、対応するページモデルの読み込みが自動的に試行されます。 ただし、SPA では、必要に応じて、PageModelManager で無視する必要があるルートの「ブロックリスト」を定義することもできます。

<meta property="cq:pagemodel_route_filters" content="route/not/found,^(.*)(?:exclude/path)(.*)"/>