简介
@motorcycle/router 是一个轻量级的、功能强大的路由库，用于前端 Web 应用程序的路由管理。它基于 Cycle.js 架构，是函数式编程的一部分，支持惰性路由和浏览器历史记录等功能，并且非常易于使用和学习。
安装
在命令行中使用 npm 安装：
npm install --save @motorcycle/router
初始化
首先，我们需要初始化路由。使用 makeRouterDriver 函数创建一个驱动程序，将其传递给 run 函数以初始化路由。
-- -------------------- ---- ------- ------ - --- - ---- ----------------- ------ - ---------------- - ---- -------------------- ----- ---- - --------- -- - -- --- - ----- ------- - - ------- ------------------ - --------- --------
路由配置
@motorcycle/router 通过将路由配置传递给 makeRouterDriver 来实现路由。路由配置定义了 URL 的路径和参数，并将其映射到组件和视图函数上。
-- -------------------- ---- ------- ----- ------ - - ---- -------------- --------- --------------- ---------------- ----------------- ---- ----------------- - ----- ------- - - ------- ------------------------ -
路由可以包含参数，并使用冒号 : 开头。例如，路由路径 /products/:id 对应的 URL 可以是 /products/123，其中 :id 参数的值为 123。
最后一个通配符路由 * 可以用来处理所有未匹配的路由。
路由信息
使用 sources.router 可以在组件内获取当前路由信息。路由信息包含当前 URL、路由参数和其他有用的信息。
const component = (sources) => {
const { router } = sources
const { url, params } = router.history
// ...
}变换流
@motorcycle/router 提供了一组变换流方法，可用于实现高级的路由功能。例如，multicastRoute 可以实现多个视图/组件之间的路由切换。
-- -------------------- ---- -------
------ - -------------- - ---- --------------------
----- --------------- - --------- -- -
----- - ------ - - -------
----- - ---- - - --------------
----- ------ - -
-------- ------------
-------- -----------
-
----- ------ - -------------------- -------
----- ----- - -------------------- -- -------------------
------ -
---- -------------- -- ----------
------- -------------- -- ------------
-
-示例代码
-- -------------------- ---- -------
------ - --- - ---- -----------------
------ - -------------- ---- --- ---- --- --- - - ---- -----------------
------ - ---------------- - ---- --------------------
----- ------------- - -- -- --
---- -----
-----------
-----
----
------ ------ - ----- --- - -- ---------
------ ------ - ----- -------- - -- ----------
------ ------ - ----- --------------- - -- -------- -------
------ ------ - ----- ------ - -- -------
--
--
---
------- ---
--
----- -------------- - -- -- --
---- -----
------------
-----
----
------ ------ - ----- --- - -- ---------
------ ------ - ----- -------- - -- ----------
------ ------ - ----- --------------- - -- -------- -------
------ ------ - ----- ------ - -- -------
--
--
---
------- ---
--
----- ---------------- - --------- -- -
----- - ------ - - -------
----- - ------ - - --------------
------ -
---- -----
----------- ---------------
-----
----
------ ------ - ----- --- - -- ---------
------ ------ - ----- -------- - -- ----------
------ ------ - ----- --------------- - -- -------- -------
------ ------ - ----- ------ - -- -------
--
--
---
------- --
-
-
----- ----------------- - -- -- --
---- -----
------- --- --------
-----
----
------ ------ - ----- --- - -- ---------
------ ------ - ----- -------- - -- ----------
------ ------ - ----- --------------- - -- -------- -------
------ ------ - ----- ------ - -- -------
--
--
---
------- --
--
----- ------ - -
---- --------------
--------- ---------------
---------------- -----------------
---- -----------------
-
----- ---- - --------- -- -
----- - ------ - - -------
----- ------ - ---------------------
----- ----- - -------------------- -- -------------------
----- ------ - -------------- -- ---------
------ -
---- -------
------- -------------- -- ----------------------------
-
-
----- ------- - -
---- ----------------------
------- ------------------------
-
--------- --------结语
至此，你已经掌握了 @motorcycle/router 的基础知识，并且了解了如何在前端 Web 应用程序中使用它。开始编写你自己的应用程序，并使用这个库来管理你的路由！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e2447b1