mithril-map-router 是一款为 mithril.js 打造的路由插件，借助于该插件，开发者可以快速编写单页面应用程序。本篇文章将详细介绍 mithril-map-router 的使用方法，以及展示一个简单而完整的项目 Demo。
安装
使用 npm 安装 mithril-map-router：
npm install mithril mithril-map-router --save
基本使用方法
在使用 mithril-map-router 之前，需要先简单了解一下 mithril.js 的框架结构。基本的框架结构如下：
-- -------------------- ---- -------
--- --- - -
----- ---------- -
------ -------- -
------- ------ ---------
------ ------ -------- --------- -------------- --------
------ ------ --------- --------- -------------- ---------
------ ------ ----------- --------- -------------- -----------
-------- ----------------------
--
-
-
---------------------- ---- -
---- ----
-------- -----
--------- ------
----------- -------
--在上述代码中，我们定义了一个简单的页面，其中包含一个标题以及三个链接，分别用来跳转到不同的子页面。在路由部分，我们使用了 mithril.js 自带的路由机制，并定义了四个不同的路由规则，分别对应了 App、Home、About、Contact 四个页面的渲染逻辑。
在 mithril-map-router 中，我们可以直接使用 JavaScript 对象来定义路由：
-- -------------------- ---- -------
------ --- ---- ----------
------ - -- ------ ---- ---------------------
----- --- - -
----- -- -- -
------ -------- -
------- ------ ---------
------ ------ ---------------------- --------
------ ------ ----------------------- ---------
------ ------ ------------------------- -----------
-------- ---------------------
--
-
-
----- ---- - -
----- -- -- -
------ -------- -
------- --------
------ ------ --------------------- ------- -- -----
--
-
-
----- ----- - -
----- -- -- -
------ -------- -
------- ---------
------ ------ --------------------- ------- -- -----
--
-
-
----- ------- - -
----- -- -- -
------ -------- -
------- -----------
------ ------ --------------------- ------- -- -----
--
-
-
------------------- - -
----- -----
------ ------
-------- --------
--- ---
--
---------------------- --- ---------------------在 mithril-map-router 中，我们首先需要导入路由模块并定义一个名为 routingTable 的 JavaScript 对象，该对象中包含了所有的路由规则。每个路由规则都是一个 JavaScript 对象，包含了页面的名字和页面的渲染逻辑（也就是 view 函数）。在路由规则对象中，主要包含以下属性：
name: 路由规则的名字，将会被用来生成路由 URL。controller: 路由规则对应的 controller。component: 路由规则对应的组件。parent: 路由规则的父级路由规则，可以用来构建嵌套路由。
在 App 组件中，我们使用了 router.toUrl() 方法来根据路由规则的名字生成相应的 URL。同时，在链接中我们也没有再使用 mithril.js 自带的路由机制，而是直接使用了普通的 href 属性，并将指向对应的路由规则。
最后，在启动 mithril.js 的路由机制之前，我们需要将 routingTable 对象传递给 mappingTable，并调用 m.route() 方法来启用路由。
嵌套路由和参数传递
在 mithril-map-router 中，我们还可以实现类似嵌套路由和参数传递的复杂路由场景。举个例子，我们可以使用以下的代码来实现类似这样的嵌套路由：
-- -------------------- ---- -------
------ --- ---- ----------
------ - -- ------ ---- ---------------------
----- --- - -
----- -- -- -
------ -------- -
------- ------ ---------
------ ------ ---------------------- --------
------ ------ ----------------------- ---------
------ ------ ------------------------- -----------
-------- ----------------------
-------- ----------------------
--
-
-
----- ----- - -
----- -- -- -
------ -------- -
------- ---------
------ ------ --------------------- ------- -- -----
--
-
-
----- ---- - -
----- -- -- -
------ -------- -
------- --------
------ ------ --------------------- ------- -- ------
------ ------ -------------------------- ------ ------- ------ ------------ ------ ----
------ ------ -------------------------- ------ ------- ------ ------------ ------ ---
--
-
-
----- ----- - -
----- -- -- -
------ -------- -
------- ---------
------ ------ --------------------- ------- -- ------
------ ------ -------------------------- ------ -------- ------ ------------ ------ ----
------ ------ -------------------------- ------ -------- ------ ------------ ------ ---
--
-
-
----- ------- - -
----- -- -- -
------ -------- -
------- -----------
------ ------ --------------------- ------- -- ------
------ ------ -------------------------- ------ ---------- ------ ------------ ------ ----
------ ------ -------------------------- ------ ---------- ------ ------------ ------ ---
--
-
-
------------------- - -
---- -
--------- ---
---------- ----
--------- -
----- -
--------- ------
---------- ----
--
------ -
--------- ------
---------- -----
--
-------- -
--------- ------
---------- -------
--
------- -
--------- ------
--------- -
----- -
--------- ---------
--------- -
------ -
--------- -------
---------- -----
-
-
-
-
-
-
-
--
---------------------- --- ---------------------在这个例子中，我们需要使用到嵌套路由和路由参数传递两个功能。首先，我们在 Home、About、Contact 三个组件中分别添加了两个链接，分别跳转到相应的主题页面，传递了 page 和 topic 两个参数。我们可以通过路由参数的获取方法 router.param() 来获取到当前页面 URL 中的参数值。
同时，在路由规则的定义中我们还定义了一个嵌套路由规则 app.topics.page.topic，它代表了在应用程序页面之下嵌套了两个参数：page 和 topic，用来控制页面渲染逻辑。在上述代码中，我们使用了 parental 属性来定义了这些路由规则的嵌套层次关系。
示例项目
为了更好地演示 mithril-map-router 的使用，我们可以使用以下的代码来实现一个具有嵌套路由和参数传递的简单 Demo：
-- -------------------- ---- -------
------ --- ---- ----------
------ - -- ------ ---- ---------------------
----- ----- - -
----- -- -- -
------ -------- -
------- -------- -- -- --------
------- -
------- ------ ------ ---------------------- ---------
------- ------ ------ ----------------------- ----------
------- ------ ------ ---------------------- ---------
------- ------ ------ ----------------------------------------- ------- -------
---
-------- ---------------------
--
-
-
----- ---- - -
----- -- -- -
------ -------- -
------- --------
------ ------ --------------------- ------- -- ------
------ ------ -------------------------- ------ ------- ------ ------------ ------ ----
------ ------ -------------------------- ------ ------- ------ ------------ ------ ---
--
-
-
----- ----- - -
----- -- -- -
------ -------- -
------- ---------
------ ------ --------------------- ------- -- ------
------ ------ -------------------------- ------ -------- ------ ------------ ------ ----
------ ------ -------------------------- ------ -------- ------ ------------ ------ ---
--
-
-
----- ------- - -
------- ------- -- -
------------------- - -----
------------------------------------------------------------ -- -
------------------- - ---------
------------------- - ------
--
--
----- ------- -- -
-- --------------------- -
------ -------- ------- ----------
-
------ -------- -
------- ---------------------------
------ -----------------------------
------ ------ ---------------------- ------- -- ------
--
-
-
----- ---- - -
------- ------- -- -
------------------- - -----
-------------------- - ---
----------------------------------------------- -- -
-------------------- - ---------
------------------- - ------
---
--
----- ------- -- -
-- --------------------- -
------ -------- ------- ----------
-
------ -------- -
------- --------
------- ---------------------------------- -- -
------ ------- -
------ ------ ---------------------------- ------ -------------- --------------
--
----
------ ------ --------------------- ------- -- -----
--
-
-
------------------- - -
---- -
--------- ---
---------- ------
--------- -
----- -
--------- ------
---------- ----
--
------ -
--------- ------
---------- -----
--
----- -
--------- ------
---------- -----
--------- -
-------- -
--------- -------
---------- -------
-
-
-
-
-
--
----- ----- -
------------------- -
----------- - -------
-
------------- -
------ ------------------ ------ ---- ----------------------------
-
-------------- -
------ ------------------ ------ ---- ----------------------------------
-
-
----- ----- - --- ----------------------------------------------
------------------- - ---------------------------
--------------------------------------- --- ---------------------在这个 Demo 中，我们实现了一个具有简单的 Blog 功能的应用程序。在应用程序中，我们使用了从 jsonplaceholder.typicode.com 上获取的假数据来呈现一个具有有嵌套路由和参数传递的 Blog。
通过本篇文章，我相信你已经详细了解了 mithril.js 以及 mithril-map-router 的使用方法和规范，并且有一定的指导意义。希望它能够帮助你更好地开发 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f4a1d8e776d080412b1