route

Roteador de tumultos

Roteador isomórfico simples

O roteador Riot.js é a implementação mínima do roteador com essas tecnologias:

• Compatível com a API Dom PushState e History
• API funcional isomórfica
• Erre.js Fluxos e Javascript Async Gerators
• Rawth.js URLs analisando

Ele não precisa de Riot.js para funcionar e pode ser usado como módulo independente.

Para Riot.js 3 e a versão da rota mais antiga, verifique a filial V3

Índice

• Instalar
• Documentação
• Demos

Instalar

Temos 2 edições:

edição	arquivo
Módulo ESM	index.js
Versão umd	index.umd.js
Módulo ESM independente	index.standalone.js
Módulo UMD independente	index.standalone.umd.js

Injeção de script

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

NOTA : Altere a parte xxx para a versão números do que você deseja usar: Ex. 4.5.0 ou 4.7.0 .

Módulo ESM

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

npm

$ npm i -S @riotjs/route

Baixar por você mesmo

• Independente
• Esm

Documentação

Com Riot.js

Você pode importar os componentes <router> e <route> em seu aplicativo e usá -los como ele segue:

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

Você também pode usar o método riot.register para registrá -los globalmente

 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 ) 

Roteador

O componente <router> deve envolver sua marcação de aplicativo e detectar automaticamente todos os cliques nos links que devem acionar um evento de rota.

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

Você também pode especificar a base do seu aplicativo por meio 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 >

O componente do roteador também possui um retorno de chamada onStarted que será chamado de assíncrono após o primeiro evento de rota será chamado

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

Rota

O componente <route> fornece a propriedade route para seus filhos (é simplesmente um objeto URL), permitindo que você detecte os parâmetros e consultas da 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> tem seus próprios atributos do ciclo de vida para informar quando for montado ou desmontado.

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

Independente

Este módulo não foi projetado apenas para ser usado com Riot.js, mas também como módulo independente. Sem importar os componentes do Riot.js em seu aplicativo, você pode usar os métodos principais exportados para criar e personalizar seu próprio roteador compatível com qualquer tipo de configuração de front -end.

Dependendo da configuração do seu projeto, você pode importá -lo da seguinte maneira:

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

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

Fundamentos

Este módulo funciona no nó e em qualquer navegador moderno, exporta a propriedade router e router exposto 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 ( ) 

Caminho base

Antes de usar o roteador no seu navegador, você precisará definir o caminho da base do aplicativo. Esta configuração pode ser configurada simplesmente via 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 ( `#` )

Definir o caminho base da sua rota de aplicativo é obrigatório e é o primeiro que você provavelmente fará antes de criar seus ouvintes de rota.

Ligação dom

O exemplo acima não é realmente prático, caso você esteja trabalhando em um ambiente de navegador. Nesse caso, você pode querer vincular seu roteador ao DOM, ouvindo todos os eventos de clique que podem desencadear um evento de mudança de rota. O histórico de janelas popstate Events também deve ser conectado ao roteador. Com o método initDomListeners , você pode alcançar automaticamente todos os recursos acima:

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

Os initDomListeners interceptarão qualquer link, clique no seu aplicativo. No entanto, ele também pode receber um HTMLELEMENT ou uma lista de htmlements como argumento para escopo o ouvinte de clique apenas para uma região DOM específica do seu aplicativo

 import { initDomListeners } from '@riotjs/route'

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