ルーティング

$mol のルーティングは別個のライブラリではありません——URL はリアクティブな状態のもう一つの断片にすぎません。読み書きすれば、ビューはどんなセルに対しても反応するのと同じように反応します。戻るボタン、ディープリンク、共有可能な URL はすべて無料でついてきます。

状態としての URL

$mol_state_arg は URL パラメータをリアクティブな値として公開します。そのひとつをプロパティに束ねれば、アドレスバーが唯一の信頼できる情報源になります。1namespace $.$$ {2 export class $my_app extends $.$my_app {3 @ $mol_mem4 page( next?: string ) {5 return $mol_state_arg.value( 'page', next ) ?? 'home'6 }7 }8}page() を読むと現在の値が返り、page('about') を呼ぶと遷移します。page() を読むものはすべて変化時に再描画されます——ブラウザの戻るボタンも含め、セルはあなたのために更新されます。

画面の切り替え

ルーティングされた値をただの switch と組み合わせて、何を描画するかを選びます。ビューは

遅延なので、表示しない画面は決して構築されません。1@ $mol_mem2body_content() {3 switch ( this.page() ) {4 case 'about': return [ this.About() ]5 case 'docs': return [ this.Docs() ]6 default: return [ this.Home() ]7 }8}

引数を設定するリンク

view.tree では、リンクが URL 引数を宣言的に設定できます——クリックすればハンドラーなしで遷移します。1<= About_link $mol_link2 arg *3 page \about4 sub / <= about_label \About$mol_link は引数が現在の URL と一致すると自らをアクティブ（mol_link_current）と印付けるので、現在のページを強調するのに余分な状態は要りません。

複数のパラメータ

引数は互いに独立しているので、画面は複数の引数で同時にルーティングできます。まさにこのドキュメントサイトは section と page の両方でルーティングしています。1<= Guide_link $mol_link2 arg *3 section \docs4 page \views各キーは URL を通じて往復するので、あらゆるビューは構造上、共有可能でブックマーク可能です。ある引数を設定しても他はそのまま残るので、ディープリンク——特定のセクションとページとアンカー——は、気にかけるキーを設定するだけの話になります。

URL に入れるべきでない状態

すべての状態がアドレスバーに属するわけではありません。ローカルに保持したいがリンクを汚したくない値——折りたたんだサイドバー、下書き——には $mol_state_local を使います。同じゲッター／セッターの形で localStorage に保存します。1@ $mol_mem2sidebar_open( next?: boolean ) {3 return $mol_state_local.value( 'sidebar_open', next ) ?? false4}GitHub でこのページを編集役に立ちましたか？はいいいえ前へ状態とリアクティビティ次へレンダリングこのページの内容状態としての URL 画面の切り替え引数を設定するリンク複数のパラメータ URL に入れるべきでない状態次へ