smalljs$molSuche⌘ KDokuPlaygroundVergleichÖkosystemÜberDE
RoutingGetting StartedEinführungMentales ModellErste SchritteVon TypeScript zu view.treeProjektstrukturWerkzeugeEssentialsInstallationViewsZustand und ReaktivitätRoutingRenderingTestenDeploymentFehlerbehebungDataDatenabrufDatenschemasGiper BazaMoreSchaufensterVon React, Vue und SvelteKochbuchAdvancedPluginsModul-MetadatenOfflineGhost-AnsichtenAboutFAQTeamReleasesAPI$mol_button_major$mol_button_minor$mol_string$mol_number$mol_text$mol_paragraph$mol_list$mol_row$mol_link$mol_check$mol_switch$mol_select$mol_scroll$mol_page$mol_pick

Routing

Routing in $mol ist keine separate Bibliothek — die URL ist nur ein weiteres Stück reaktiven Zustands. Lesen Sie sie, schreiben Sie sie, und Ansichten reagieren genauso, wie sie auf jede Zelle reagieren. Der Zurück-Button, Deep Links und teilbare URLs gibt es alle gratis.

Die URL als Zustand

$mol_state_arg stellt URL-Parameter als reaktive Werte bereit. Binden Sie einen an eine Eigenschaft, und die Adressleiste wird zu Ihrer Quelle der Wahrheit: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() zu lesen gibt den aktuellen Wert zurück; page('about') aufzurufen navigiert. Alles, was page() liest, wird bei Änderung neu gerendert — einschließlich des Zurück-Buttons des Browsers, der die Zelle für Sie aktualisiert.

Bildschirme wechseln

Kombinieren Sie einen gerouteten Wert mit einem einfachen switch, um zu wählen, was gerendert wird. Da Ansichten faul sind, werden die Bildschirme, die Sie nicht zeigen, nie gebaut: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}

Links, die Argumente setzen

In view.tree kann ein Link URL-Argumente deklarativ setzen — ein Klick darauf navigiert ohne Handler:1<= About_link $mol_link2 arg *3 page \about4 sub / <= about_label \About$mol_link markiert sich auch als aktiv (mol_link_current), wenn seine Argumente mit der aktuellen URL übereinstimmen, sodass das Hervorheben der aktuellen Seite keinen zusätzlichen Zustand braucht.

Mehrere Parameter

Argumente sind unabhängig, daher kann ein Bildschirm auf mehreren gleichzeitig routen. Genau diese Doku-Seite routet sowohl auf section als auch auf page:1<= Guide_link $mol_link2 arg *3 section \docs4 page \viewsJeder Schlüssel macht den Rundlauf durch die URL, daher ist jede Ansicht von Natur aus teilbar und als Lesezeichen speicherbar. Das Setzen eines Arguments lässt die anderen unberührt, was Deep Links — einen bestimmten Abschnitt und eine Seite und einen Anker — zu einer bloßen Frage des Setzens der Schlüssel macht, die Ihnen wichtig sind.Diese Seite auf GitHub bearbeitenWar das hilfreich?JaNeinZurückZustand und ReaktivitätWeiterRenderingAuf dieser SeiteDie URL als ZustandBildschirme wechselnLinks, die Argumente setzenMehrere ParameterZustand, der nicht in die URL gehörtWeiter
Type to search the documentation.