route
v9.2.1
簡單的同構路由器
Riot.js路由器是使用此類技術的最小路由器的實現：
它不需要Riot.js工作，可以用作獨立模塊。
對於Riot.js 3和較舊的路線版本，請檢查V3分支
我們有兩個版本：
| 版 | 文件 |
|---|---|
| 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零件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或HTMLELEMENT的列表作為參數，以範圍單擊“偵聽器”
import { initDomListeners } from '@riotjs/route'
initDomListeners ( document . querySelector ( '.main-navigation' ) )
