route
v9.2.1
Einfacher isomorpher Router
Der RIOT.JS -Router ist die minimale Router -Implementierung mit solchen Technologien:
Es braucht keine Riot.js, um zu funktionieren, und kann als eigenständiges Modul verwendet werden.
Für Riot.js 3 und die ältere Routenversion überprüfen Sie bitte die V3 -Filiale
Wir haben 2 Ausgaben:
| Ausgabe | Datei |
|---|---|
| ESM -Modul | index.js |
| UMD -Version | index.umd.js |
| Eigenständiges ESM -Modul | index.standalone.js |
| Eigenständiges UMD -Modul | index.standalone.umd.js |
< script src =" https://unpkg.com/@riotjs/[email protected]/index.umd.js " > </ script > Hinweis : Ändern Sie den Teil xxx in die Versionsnummern, was Sie verwenden möchten: Ex. 4.5.0 oder 4.7.0 .
import { route } from 'https://unpkg.com/@riotjs/route/index.js'$ npm i -S @riotjs/route Sie können die Komponenten <router> und <route> in Ihrer Anwendung importieren und sie verwenden, wie es folgt:
< app >
< router >
<!-- These links will trigger automatically HTML5 history events -->
< nav >
< a href =" /home " > Home </ a >
< a href =" /about " > About </ a >
< a href =" /team/gianluca " > Gianluca </ a >
</ nav >
<!-- Your application routes will be rendered here -->
< route path =" /home " > Home page </ route >
< route path =" /about " > About </ route >
< route path =" /team/:person " > Hello dear { route.params.person } </ route >
</ router >
< script >
import { Router , Route } from '@riotjs/route'
export default {
components { Router , Route }
}
</ script >
</ app > Sie können auch die methode riot.register verwenden, um sie global zu registrieren
import { Route , Router } from '@riotjs/route'
import { register } from 'riot'
// now the Router and Route components are globally available
register ( 'router' , Router )
register ( 'route' , Route ) Die <router> -Komponente sollte Ihr Anwendungsmarkup einwickeln und automatisch alle Klicks auf Links erkennen, die ein Routenereignis auslösen sollten.
< router >
<!-- this link will trigger a riot router event -->
< a href =" /path/somewhere " > Link </ a >
</ router >
<!-- this link will work as normal link without triggering router events -->
< a href =" /path/to/a/page " > Link </ a >Sie können auch die Basis Ihrer Anwendung über Komponentenattribute angeben:
< router base =" /internal/path " >
<!-- this link is outside the base so it will work as a normal link -->
< a href =" /somewhere " > Link < a >
</ router > Die Routerkomponente hat auch einen onStarted Rückruf, der nach dem ersten Routenereignis asynchron genannt wird
< router onStarted =" {onRouterStarted} " > </ router > Die <route> -Komponente stellt die route -Eigenschaft für ihre Kinder (es ist einfach ein URL -Objekt) zur Verfügung, mit der Sie die URL -Parameter und -Anfragen erkennen können.
< route path =" /:some/:route/:param " > {JSON.stringify(route.params)} </ route >
< route path =" /search(.*) " >
<!-- Assuming the URL is "/search?q=awesome" -->
{route.searchParams.get('q')}
</ route > Jede <route> -Komponente verfügt über eigene Lebenszyklusattribute, damit Sie wissen, wann sie montiert oder unmontiert wird.
< app >
< router >
< route path = " /home "
on-before-mount ={ onBeforeHomeMount }
on-mounted ={ onHomeMounted }
on-before-update ={ onBeforeHomeUpdate }
on-updated ={ onHomeUpdated }
on-before-unmount ={ onBeforeHomeUnmount }
on-unmounted ={ onHomeUnmounted }
/>
</ router >
</ app >Dieses Modul wurde nicht nur so konzipiert, dass sie mit Riot.js verwendet werden konnten, sondern auch als eigenständiges Modul. Ohne die Riot.js -Komponenten in Ihrer Anwendung zu importieren, können Sie die Kernmethoden verwenden, um Ihren eigenen Router zu erstellen und anzupassen, der mit jeder Art von Frontend -Setup kompatibel ist.
Abhängig von Ihrem Projekt -Setup können Sie es wie folgt importieren:
// in a Riot.js application
import { route } from '@riotjs/route'
// in a standalone context
import { route } from '@riotjs/route/standalone' Dieses Modul arbeitet auf dem Knoten und auf jedem modernen Browser, es exportiert die von Rawth ausgesetzte router und router -Eigenschaft
import { route , router , setBase } from '@riotjs/route'
// required to set base first
setBase ( '/' )
// create a route stream
const aboutStream = route ( '/about' )
aboutStream . on . value ( ( url ) => {
console . log ( url ) // URL object
} )
aboutStream . on . value ( ( ) => {
console . log ( 'just log that the about route was triggered' )
} )
// triggered on each route event
router . on . value ( ( path ) => {
// path is always a string in this function
console . log ( path )
} )
// trigger a route change manually
router . push ( '/about' )
// end the stream
aboutStream . end ( ) Bevor Sie den Router in Ihrem Browser verwenden, müssen Sie Ihren Anwendungsgrundweg festlegen. Diese Einstellung kann einfach über setBase -Methode konfiguriert werden:
import { setBase } from '@riotjs/route'
// in case you want to use the HTML5 history navigation
setBase ( `/` )
// in case you use the hash navigation
setBase ( `#` )Das Einstellen des Grundweges Ihrer Anwendungsroute ist obligatorisch und wird das erste Mal tun, bevor Sie Ihre Routenhörer erstellen.
Das obige Beispiel ist nicht wirklich praktisch, falls Sie in einer Browserumgebung arbeiten. In diesem Fall möchten Sie Ihren Router möglicherweise an das DOM -Hören alle Klickereignisse binden, die möglicherweise ein Routenänderungsereignis auslösen. popstate -Ereignisse der Fenstergeschichte sollten ebenfalls mit dem Router verbunden sein. Mit der initDomListeners -Methode können Sie automatisch alle oben genannten Funktionen erreichen:
import { initDomListeners } from '@riotjs/route'
const unsubscribe = initDomListeners ( )
// the router is connected to the page DOM
// ...tear down and disconnect the router from the DOM
unsubscribe ( ) Die initDomListeners fangen einen beliebigen Link ab. Klicken Sie auf Ihre Anwendung. Es kann jedoch auch eine HTMLElement oder eine Liste von HTMLElements als Argument erhalten
import { initDomListeners } from '@riotjs/route'
initDomListeners ( document . querySelector ( '.main-navigation' ) )
