route
v9.2.1
Enrutador isomórfico simple
El enrutador Riot.js es la implementación mínima del enrutador con tales tecnologías:
No necesita Riot.js para trabajar y puede usarse como módulo independiente.
Para Riot.js 3 y la versión de ruta anterior, consulte la rama V3
Tenemos 2 ediciones:
| edición | archivo |
|---|---|
| Módulo ESM | index.js |
| Versión UMD | index.umd.js |
| Módulo ESM independiente | index.standalone.js |
| Módulo UMD independiente | index.standalone.umd.js |
< script src =" https://unpkg.com/@riotjs/[email protected]/index.umd.js " > </ script > Nota : Cambie la parte xxx a los números de versión lo que desea usar: Ej. 4.5.0 o 4.7.0 .
import { route } from 'https://unpkg.com/@riotjs/route/index.js'$ npm i -S @riotjs/route Puede importar los componentes <router> y <route> en su aplicación y usarlos según lo siga:
< 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 > También puede usar el método riot.register para registrarlos a nivel mundial
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 ) El componente <router> debe envolver el marcado de su aplicación y detectará automáticamente todos los clics en los enlaces que deben activar un evento de ruta.
< 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 >También puede especificar la base de su aplicación a través de atributos de componentes:
< router base =" /internal/path " >
<!-- this link is outside the base so it will work as a normal link -->
< a href =" /somewhere " > Link < a >
</ router > El componente del enrutador también tiene una devolución de llamada onStarted que se llamará asíncronamente después de que se llamará al evento de la primera ruta
< router onStarted =" {onRouterStarted} " > </ router > El componente <route> proporciona la propiedad route a sus hijos (es simplemente un objeto URL) que le permite detectar los parámetros y consultas de 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 > Cada componente <route> tiene sus propios atributos del ciclo de vida para informarle cuándo se monta o se desmonta.
< 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 >Este módulo no solo fue diseñado para usarse con Riot.js sino también como módulo independiente. Sin importar los componentes Riot.js en su aplicación, puede usar los métodos principales exportados para construir y personalizar su propio enrutador compatible con cualquier tipo de configuración de frontend.
Dependiendo de la configuración de su proyecto, puede importarla de la siguiente manera:
// in a Riot.js application
import { route } from '@riotjs/route'
// in a standalone context
import { route } from '@riotjs/route/standalone' Este módulo funciona en el nodo y en cualquier navegador moderno, exporta la propiedad router y router expuesto por 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 ( ) Antes de usar el enrutador en su navegador, deberá establecer su ruta base de aplicación. Esta configuración se puede configurar simplemente a través del método 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 ( `#` )Establecer la ruta base de la ruta de su aplicación es obligatoria y es la primera que probablemente hará antes de crear sus oyentes de ruta.
El ejemplo anterior no es realmente práctico en caso de que esté trabajando en un entorno de navegador. En ese caso, es posible que desee vincular su enrutador al DOM escuchando todos los eventos de clic que podrían activar un evento de cambio de ruta. Los eventos popstate de Window History también deben conectarse al enrutador. Con el método initDomListeners , puede lograr automáticamente todas las características anteriores:
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 ( ) initDomListeners interceptará cualquier enlace que haga clic en su aplicación. Sin embargo, también puede recibir un htmlelement o una lista de htmlelements como argumento para alcanzar el oyente de clic solo a una región DOM específica de su aplicación
import { initDomListeners } from '@riotjs/route'
initDomListeners ( document . querySelector ( '.main-navigation' ) )
