route
v9.2.1
単純な同型ルーター
Riot.JSルーターは、このようなテクノロジーを備えた最小限のルーターの実装です。
動作するにはriot.jsは必要ありませんし、スタンドアロンモジュールとして使用できます。
Riot.js 3および古いルートバージョンについては、V3ブランチを確認してください
2つのエディションがあります：
| 版 | ファイル |
|---|---|
| ESMモジュール | index.js |
| UMDバージョン | index.umd.js |
| スタンドアロンESMモジュール | index.standalone.js |
| スタンドアロンUMDモジュール | index.standalone.umd.js |
< script src =" https://unpkg.com/@riotjs/[email protected]/index.umd.js " > </ script >注：パートxxxバージョン番号に変更します。 4.5.0または4.7.0 。
import { route } from 'https://unpkg.com/@riotjs/route/index.js'$ npm i -S @riotjs/routeアプリケーションに<router>および<route>コンポーネントをインポートし、次のように使用できます。
< 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 > riot.registerメソッドを使用してグローバルに登録することもできます
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 ) <router>コンポーネントは、アプリケーションのマークアップをラップし、ルートイベントをトリガーするリンクのすべてのクリックを自動的に検出します。
< 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 >コンポーネント属性を介してアプリケーションのベースを指定することもできます。
< router base =" /internal/path " >
<!-- this link is outside the base so it will work as a normal link -->
< a href =" /somewhere " > Link < a >
</ router >ルーターコンポーネントには、最初のルートイベントが呼び出された後に非同期に呼ばれるonStartedコールバックもあります
< router onStarted =" {onRouterStarted} " > </ router > <route>コンポーネントは、その子供にrouteプロパティを提供します（これは単にURLオブジェクトです）。これにより、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 >各<route>コンポーネントには、マウントまたはマウントされていない時期を知らせるために、独自のライフサイクル属性があります。
< 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 >このモジュールは、Riot.jsで使用するだけでなく、スタンドアロンモジュールとしても使用されるように設計されています。 Riot.jsコンポーネントをアプリケーションにインポートせずに、エクスポートしたコアメソッドを使用して、あらゆる種類のフロントエンドセットアップと互換性のある独自のルーターを構築およびカスタマイズできます。
プロジェクトのセットアップに応じて、次のようにインポートできます。
// in a Riot.js application
import { route } from '@riotjs/route'
// in a standalone context
import { route } from '@riotjs/route/standalone' このモジュールはノードと最新のブラウザで動作し、Rawthによって露出したrouterとrouterプロパティをエクスポートします
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 ( ) ブラウザでルーターを使用する前に、アプリケーションのベースパスを設定する必要があります。この設定は、 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 ( `#` )アプリケーションルートのベースパスを設定することは必須であり、ルートリスナーを作成する前におそらく最初に行う予定です。
上記の例は、ブラウザ環境で作業している場合に実際には実用的ではありません。その場合、ルーターの変更イベントをトリガーする可能性のあるすべてのクリックイベントを聞くルーターにルーターをバインドすることをお勧めします。 Window History popstateイベントもルーターに接続する必要があります。 initDomListenersメソッドを使用すると、上記のすべての機能を自動的に実現できます。
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は、アプリケーションをクリックするリンクを傍受します。ただし、アプリケーションの特定のDOM領域のみにクリックリスナーを範囲するための引数としてHTMLELEMENTまたはHTMLELEMENTSのリストを受信することもできます
import { initDomListeners } from '@riotjs/route'
initDomListeners ( document . querySelector ( '.main-navigation' ) )
