子ルーティングモード
ofa.jsでは、サブルーティングの方法は他のフロントエンドフレームワークとは少し異なります。ofa.jsでは、より直感的な方法を使用して、ページモジュールに親ページを設定することで、コンテナとして機能し、サブルーティングの要件を実現しています。
親ページコンテナの設定
子ルートを作成するためには、まず、子ページのページモジュールに parent パラメータを設定し、親ページのページモジュールのアドレスを指定する必要があります。これにより、子ページの読み込み時に、ofa.js は自動的に子ページを親ページのコンテナで囲みます。
<template page>
<h1>Page 1</h1>
<script>
export const parent = "./layout-page.html";
</script>
</template>
上述の例では、サブページのページモジュールは parent パラメータを使用して親ページコンテナのアドレスを指定しています。
父ページのコンテナテンプレートの設定
父ページのコンテナのテンプレートには、<slot> 要素を設定する必要があります。これにより、子ページを親ページの指定位置に挿入できます。同時に、<slot> 要素のコンテナ要素を position: relative に設定することも重要です。なぜなら、子ページは親ページのコンテナで絶対位置に配置されるからです。
以下は親ページのコンテナのサンプルテンプレートです：
<!-- layout-page.html -->
<template page>
<style>
/* 容器要素を relative 位置指定にする */
.parent-container {
position: relative;
}
</style>
<!-- 子ページを挿入するための容器要素を設定する -->
<div class="parent-container">
<slot></slot>
</div>
</template>
上記の例では、slot を持つコンテナ要素を設定することで、サブページはそのコンテナに挿入されます。コンテナ要素に相対配置が設定されていることを確認してください。そうすれば、サブページはコンテナに基づいて配置されます。
子ルートを設定するために、この方法を使用することで、親ページのコンテナと子ページの関連を設定して、子ページの読み込みと描画を実現することができます。
親ページのルートリスニング
ある場合において、複数のページが同じ親ページをコンテナとして共有し、これらのページ間で移動すると親ページはリフレッシュされません。この場合、親ページはまだルートの変更を監視することができ、ページのリフレッシュなしで適切な操作を実行することがでます。
ルート変更のリスニング
父ページのモジュールでは、routerChange関数を設定することができます。これは、ルートの変更を監視するために使用されます。親ページをリフレッシュせずにページのルートが変更されると、routerChangeイベントが発生します。このイベントには、現在のページの情報と移方法（type）が渡されます。
以下は親ページのモジュールの例であり、routerChange 関数を設定してルートの変更を監視する方法を示しています。
// 父ページのページモジュール
export const routerChange = (current, type) => {
console.log(`ルーターの切り替え：現在のページは ${current.src}、切り替えの方法は ${type}`);
};
上記の例では、「routerChange」関数は2つの引数を受け取ります。「current」は現在のページのアドレスを示し、「type」は遷移方法を示します。ページのルーティングが切り替わると、この関数がトリガーされ、対応する情報が出力されます。