라우팅 — $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을 사용하세요. 같은 게터/세터 형태로 localStorage에 저장합니다.1@ $mol_mem2sidebar_open( next?: boolean ) {3 return $mol_state_local.value( 'sidebar_open', next ) ?? false4}GitHub에서 이 페이지 편집도움이 되었나요?예아니요이전상태와 반응성 다음렌더링이 페이지에서상태로서의 URL 화면 전환 인자를 설정하는 링크 여러 매개변수 URL에 두면 안 되는 상태 다음