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