引言
在前端开发中，我们经常需要使用路由管理页面的跳转和状态等，通常我们会使用框架提供的路由功能，比如 Vue-Router 或 React-Router 等。但对于小型项目或者纯静态页面，引入这些框架则稍显繁琐，此时 static-router 可以成为一个极佳的选择。
static-router 是一个简单的、只提供基本路由功能的 npm 包，它不需要任何特定框架的支持，只需要 JavaScript 语言本身，而且易于使用和上手。本文将详细介绍如何使用 static-router，以及其一些高级用法。
安装和使用
首先我们需要安装它：
--- ------- -------------
然后在项目中引入：
------ ------ ---- ---------------
接下来，就可以使用 Router 类创建一个路由实例，并进行一些基本设置，例如设置根路由和404页面等：
----- ------ - --- --------
----- ----------
----- ----
------- -
- ----- ---- ---------- ---- --
- ----- --------- ---------- ----- --
- ----- ----------- ---------- ------- --
- ----- ---- ---------- -------- -
-
--以上代码创建了一个路由实例，并声明了四个路由：
- '/'是项目的根路径，对应的组件是 Home；
- '/about'对应的组件是 About；
- '/contact'对应的组件是 Contact；
- '*'表示任何其他路由都会映射到 NotFound 组件。
接下来我们需要将路由实例的 init 方法挂载到页面加载事件上：
------------------------------- -- -- - ------------- --
这样，当浏览器加载页面时，路由实例便完成初始化，根据浏览器的 URL 路径，将相应的组件渲染到页面中去。
接下来我们看一下具体的路由实现。
路由实现
在 static-router 中，路由是通过正则表达式匹配实现的。因此，我们需要为每个路由指定一个字符串路径和一个对应的组件对象。
在路由初始化时，我们将所有路由配置加入一个映射表中，并提前对这些路由进行正则表达式的解析，将其转化为对应的匹配规则。
----- ------ -
-------------------- -
--------- - ------------ -- ------
----------- - -------------- -- --
-------------- - --
-----------
-
------ -
-- ---------- --- ---------- -
-------------------------------- -------------------
----------------------------------- ----------------------
- ---- -
------------------------------------- -- -- -
--------------
--
-
--------------------------- -- -
-------------------------- - -----
------------ - ------------------------
--
-
-在注册路由时，我们首先获取浏览器当前的 URL 地址，将其中的路径部分与路由规则进行匹配，如果有匹配成功的路由，则将其对应的组件渲染到页面中去；否则就渲染404页面。
----- ------ -
-- ---
--------- -
----- ---- - --------- --- --------- - ---------------------------------------- - -------------------------------------
----- ----- - ----------------
----- - ---------- --------- - - ----- -- -------------------
----------------------
-
----------- -
--- ------ ---------- ------ -- ------------------------------- -
----- ----- - -----------------------
-- ------- -
------ - --------- ------- ---------------- -
-
-
-
----------------- -
----- ---- - ------------------------------
-------------------------- --- -----
-
-以上就是 static-router 的基本逻辑，接下来我们看一些高级用法。
高级用法
嵌套路由
由于 static-router 并没有像 Vue-Router 或 React-Router 提供组件嵌套和命名视图的语法糖，我们需要手动编写嵌套路由的逻辑。
例如我们有一个主路由 /dashboard，其中包含了两个子路由：/dashboard/home 和 /dashboard/settings。
----- ------ - --- --------
----- ----------
----- -------------
------- -
-
----- --------
---------- -----
----------- ----
----- ------
--
-
----- ------------
---------- ---------
----------- ----
----- ----------
-
-
--在路由注册时，我们给每个路由添加了外部容器的 parentPath 和路由名称 name 两个属性，这样我们就可以根据路由名称通过 React.Children.map 提取子组件，并在主组件中使用。
----- --------- ------- --------------- -
-------- -
------ -
-----
------------------
----
----
----- --------------------------------
-----
----
----- ----------------------------------------
-----
-----
---- --------------------
---------------------------------------- ----- -- -
------ ------------------------- -
----- -----------------
----------- ------------
--
---
------
------
-
-
-就这样，我们便完成了嵌套路由的实现。
URL 参数
static-router 也支持对 URL 参数的提取和使用。
例如我们有一个路由 /users/id，其中 id 表示用户ID。在路由注册时，我们可以通过正则表达式表示参数的提取规则，然后通过 match 方法将参数对象传递给组件。
----- ------ - --- --------
----- ----------
------- -
-
----- -------------
---------- -----
----- -------
------- --------------------------
-
-
--在组件中，我们可以使用 props.params 访问传进来的参数对象。
----- ---- ------- --------------- -
-------- -
----- - -- - - -----------------
------ -
-----
-------- ---------
------
-
-
-注意：由于 static-router 并非为 React 设计，故无法直接通过 props.params 取得传递进来的参数对象。这里我们结合 React 自带的组件钩子 componentWillReceiveProps 进行参数获取。
----- ---- ------- --------------- -
------------------ -
------------
---------- - - --- --------------------- -
-
------------------------------------ -
--------------- --- ------------------- --
-
-------- -
------ -
-----
-------- --------------------
------
-
-
-这样，我们就可以使用静态路由实现 URL 参数的提取和使用。
总结
static-router 是一个简单、易用的 npm 包，适用于小型项目和纯静态页面场景下的路由管理。在使用时只需要引入 JS 文件并创建路由实例即可。本文推荐使用时注意嵌套路由和 URL 参数的使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/92924