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 на номера версий, которые вы хотите использовать: 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' Этот модуль работает на узле, а в любом современном браузере он экспортирует свойство router и router , выявленную 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 ( ) Перед использованием маршрутизатора в вашем браузере вам нужно будет установить базовый путь вашего приложения. Этот параметр можно настроить просто с помощью метода 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 ( `#` )Установка базового пути вашего маршрута приложения является обязательным, и первым вы, вероятно, сделаете, прежде чем создать слушателей маршрута.
Приведенный выше пример не совсем практичен, если вы работаете в среде браузера. В этом случае вы можете привязать свой маршрутизатор с 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 будет перехватывать любую ссылку, нажмите на ваше приложение. Однако он также может получить HTMlelement или список HTMlelements в качестве аргумента, чтобы охватить прослушивание кликов только в определенную область DOM вашего приложения
import { initDomListeners } from '@riotjs/route'
initDomListeners ( document . querySelector ( '.main-navigation' ) )
