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 > 참고 : Part xxx 버전 번호로 변경하려는 내용 : EX. 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 ( `#` )응용 프로그램 경로의 기본 경로를 설정하는 것은 필수이며 경로 청취자를 만들기 전에 가장 먼저 할 것입니다.
위의 예는 브라우저 환경에서 작업하는 경우 실제로 실용적이지 않습니다. 이 경우 라우터를 Route Change 이벤트를 유발할 수있는 모든 클릭 이벤트를 듣는 DOM에 라우터를 바인딩 할 수 있습니다. 윈도우 히스토리 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' ) )
