路由 — $mol

路由

$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，它以相同的 getter/setter 形態儲存到 localStorage：1@ $mol_mem2sidebar_open( next?: boolean ) {3 return $mol_state_local.value( 'sidebar_open', next ) ?? false4}在 GitHub 上編輯此頁這有幫助嗎？是否上一頁狀態與響應式下一頁渲染本頁內容URL 即狀態切換畫面設定參數的連結多個參數不該放進 URL 的狀態下一步