route

Routeur d'émeute

Routeur isomorphe simple

Le routeur Riot.js est la mise en œuvre minimale du routeur avec de telles technologies:

• Compatible avec lastate Pushstate et l'histoire DOM
• API fonctionnel isomorphe
• Streams Erre.js et générateurs asynchrones javascript
• RAWTH.JS URLS Analyse

Il n'a pas besoin de Riot.js pour fonctionner et peut être utilisé comme module autonome.

Pour Riot.js 3 et l'ancienne version de route, veuillez vérifier la branche V3

Table des matières

• Installer
• Documentation
• Démos

Installer

Nous avons 2 éditions:

édition	déposer
Module ESM	index.js
Version UMD	index.umd.js
Module ESM autonome	index.standalone.js
Module UMD autonome	index.standalone.umd.js

Injection de script

 < script src =" https://unpkg.com/@riotjs/[email protected]/index.umd.js " > </ script >

Remarque : modifiez la partie xxx en numéros de version ce que vous souhaitez utiliser: Ex. 4.5.0 ou 4.7.0 .

Module ESM

 import { route } from 'https://unpkg.com/@riotjs/route/index.js'

NPM

$ npm i -S @riotjs/route

Télécharger par vous-même

• Autonome
• ESM

Documentation

Avec Riot.js

Vous pouvez importer les composants <router> et <route> de votre application et les utiliser comme il suit:

 < 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 >

Vous pouvez également utiliser la méthode riot.register pour les enregistrer à l'échelle mondiale

 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 ) 

Routeur

Le composant <router> doit envelopper le balisage de votre application et détectera automatiquement tous les clics sur les liens qui devraient déclencher un événement d'itinéraire.

 < 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 >

Vous pouvez également spécifier la base de votre application via des attributs de composants:

 < router base =" /internal/path " >
  <!-- this link is outside the base so it will work as a normal link -->
  < a href =" /somewhere " > Link < a >
</ router >

Le composant du routeur a également un rappel onStarted qui sera appelé de manière asynchrone après que l'événement du premier itinéraire sera appelé

 < router onStarted =" {onRouterStarted} " > </ router > 

Itinéraire

Le composant <route> fournit la propriété route vers ses enfants (c'est simplement un objet URL) vous permettant de détecter les paramètres et les requêtes d'URL.

 < 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 >

Chaque composant <route> a ses propres attributs de cycle de vie afin de vous faire savoir quand il est monté ou non monté.

< 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 >

Autonome

Ce module a non seulement été conçu pour être utilisé avec Riot.js mais aussi comme module autonome. Sans importer les composants Riot.js dans votre application, vous pouvez utiliser les méthodes de base exportées pour créer et personnaliser votre propre routeur compatible avec tout type de configuration de frontend.

Selon la configuration de votre projet, vous pouvez l'importer comme suit:

 // in a Riot.js application
import { route } from '@riotjs/route'

// in a standalone context
import { route } from '@riotjs/route/standalone' 

Fondamentaux

Ce module fonctionne sur le nœud et sur n'importe quel navigateur moderne, il exporte la propriété router et router exposée par Rawth

 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 ( ) 

Chemin de base

Avant d'utiliser le routeur dans votre navigateur, vous devrez définir votre chemin de base d'application. Ce paramètre peut être configuré simplement via la méthode setBase :

 import { setBase } from '@riotjs/route'

// in case you want to use the HTML5 history navigation
setBase ( `/` )

// in case you use the hash navigation
setBase ( `#` )

La définition du chemin de base de votre itinéraire d'application est obligatoire et est la première que vous allez probablement faire avant de créer vos écouteurs d'itinéraire.

Liaison DOM

L'exemple ci-dessus n'est pas vraiment pratique au cas où vous travailleriez dans un environnement de navigateur. Dans ce cas, vous voudrez peut-être lier votre routeur à la DOM écoutant tous les événements de clic qui pourraient déclencher un événement de changement d'itinéraire. Les événements de la fenêtre popstate doivent également être connectés au routeur. Avec la méthode initDomListeners , vous pouvez automatiquement réaliser toutes les fonctionnalités ci-dessus:

 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 ( )

Les initDomListeners intercepteront tout lien cliquez sur votre application. Cependant, il peut également recevoir un htmlelement ou une liste de HTMlelements comme argument pour étendre l'écouteur de clics uniquement vers une région DOM spécifique de votre application

 import { initDomListeners } from '@riotjs/route'

initDomListeners ( document . querySelector ( '.main-navigation' ) )