在前端开发中，路由是不可或缺的一部分。我们通常使用一些路由库来管理我们的路由，而 state-hash-router 就是一个优秀的路由库。
什么是 state-hash-router
state-hash-router 是一个轻量级的路由库，可以帮助我们更好地管理我们的路由。它使用浏览器的 URL Hash 作为路由地址，并使用状态对象来存储路由组件的状态信息。它还支持异步加载组件，模块化开发和多路由实例。
安装
您可以使用 npm 来安装 state-hash-router。在您的项目中，使用以下命令进行安装：
npm install state-hash-router --save
使用
state-hash-router 提供了一个 Router 本地类作为主要接口。您可以使用以下代码来创建路由器：
-- -------------------- ---- -------
------ - ------ - ---- --------------------
----- ------ - -
-
----- ----
---------- ----
--
-
----- ---------
---------- -----
--
-
----- ---------
---------- ------
------- -
-
----- -------------
---------- ----
-
-
-
--
----- ------ - --- --------
------
---在以上代码中，我们定义了一个包含根、关于和用户路由的路由配置（routes）。我们然后使用这个路由配置来创建一个新的路由器（router）。
在我们创建了路由器之后，我们需要启动它，这样它就可以开始监听浏览器中 URL 的变化。我们可以使用以下代码来启动路由器：
router.start();
使用以上代码，我们就完成了路由器的配置。现在，我们可以在浏览器中输入相应的 URL 来访问我们所定义的路由。
路由匹配规则
在 state-hash-router 中，路由匹配是基于 URL Hash 来实现的。它使用简单的规则来匹配 URL 与路由配置中的路径。具体而言，它使用以下规则：
- 如果 URL Hash 等于路由配置中的路径，则匹配成功。
- 如果路由配置中的路径以
:开头，则匹配成功。 - 如果路由配置中定义了嵌套路由，则忽略父级路由的路径。
下面是几个示例，帮助您更好地理解路由匹配规则：
-- -------------------- ---- -------
----- ------ - -
-
----- ----
---------- ----
--
-
----- ---------
---------- -----
--
-
----- -------------
---------- ----
-
--
-- ----
-----------------
-- ----
----------------------
-- ------- ---- --
-------------------------
-- -------- -------- ----
----------------------在以上示例中，我们定义了根、关于和用户路由。用户路由使用了动态参数来捕获 URL 中的 ID 值，我们可以使用 :id 的形式来定义这个参数。我们可以通过将 URL Hash 设为我们所需要的 URL 来触发路由器的路由匹配。
路由传参
在 state-hash-router 中，我们可以在 URL 中添加参数来传递数据。这些参数将作为查询参数添加到 URL Hash 后面，您可以使用以下代码来获取这些参数：
const query = router.getQuery();
使用以上代码，我们可以获取当前 URL Hash 后面所带的参数。如果我们的 URL Hash 为 /users/10?orderby=name&direction=asc，则查询参数对象（query）将包含如下内容：
{
orderby: "name",
direction: "asc"
}嵌套路由
state-hash-router 支持嵌套路由的定义，让我们可以更好地组织我们的路由模块。在嵌套路由中，父级路由的组件可以包含一个子级路由组件，而子级路由又可以拥有自己的嵌套路由。以下是一个嵌套路由的示例代码：
-- -------------------- ---- -------
----- ------ - -
-
----- ----
---------- ----
--
-
----- ---------
---------- -----
--
-
----- ---------
---------- ------
------- -
-
----- -------------
---------- ----
--
-
----- ---------------
---------- ---------
-
-
-
--在以上代码中，我们定义了一个包含用户路由的嵌套路由。用户路由组件可以包含两个子级路由组件，一个是用户详情，另一个是用户所发表的文章。
异步组件
state-hash-router 支持异步组件的加载，这让我们可以在组件需要时再加载它们，而不是在应用程序启动时一次性加载所有组件。以下是一个异步组件的示例代码：
-- -------------------- ---- -------
----- ------ - -
-
----- ----
---------- ----
--
-
----- ---------
---------- -- -- ---------------------
--
-
----- ---------
---------- ------
------- -
-
----- -------------
---------- -- -- --------------------
-
-
-
--在以上示例中，我们使用箭头函数的形式来定义异步组件。当路由匹配到相应的路径时，state-hash-router 将自动加载相应的组件。
结论
通过本文的介绍，您现在应该已经了解了 state-hash-router 的使用方法。它是一个十分强大、灵活和精简的路由库，能够帮助我们更好地管理前端路由。如果您正在寻找一个可靠的路由库，那么 state-hash-router 就是您的不二之选。最后，附上一个完整的路由配置及使用示例供您参考：
-- -------------------- ---- -------
------ - ------ - ---- --------------------
----- ------ - -
-
----- ----
---------- ----
--
-
----- ---------
---------- -- -- ---------------------
--
-
----- ---------
---------- ------
------- -
-
----- -------------
---------- -- -- --------------------
-
-
-
--
----- ------ - --- --------
------
---
---------------------- ----- ----- -- -
-- -- --------- ------ ---- ----------
-------
---
--------------------- ----- -- -
-- -- --------- ----- ---- ----------
---
---------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556a381e8991b448d36d0