在前端开发中，常常需要通过 URL 控制页面的显示和跳转，这就需要使用到路由。而 simple-javascript-router 就是一个简单而强大的 JavaScript 路由库，能够通过监听 URL 的变化来实现页面跳转和显示。
本文将详细讲解如何使用 simple-javascript-router，并提供实际案例代码供读者参考。
安装
simple-javascript-router 可以通过 npm 包管理工具进行安装。在命令行中执行以下命令即可安装并添加到你的项目中。
npm install simple-javascript-router --save
使用方法
使用 simple-javascript-router 非常简单，只需首先实例化一个路由器对象，然后添加路由框架即可。简单路由框架示例如下：
-- -------------------- ---- -------
--- ------ - --- --------
---- -
--- -------- -- -
-----------------
--
------- ---------- ---
------ ---------- --
--
--------- -
--- -------- -- -
-------------------
--
------- ---------- ---
------ ---------- --
--
---- -
--- -------- -- -
------------------
--
------- ---------- ---
------ ---------- --
-
--可以看到，路由框架是一个对象，其中包含了路由的路径和对应的处理逻辑。在上面的示例中，我们为首页、关于我们以及 404 网址分别设置了处理逻辑。
在实例化路由器对象之后，我们需要调用路由器对象的 init 方法才能使路由生效。
router.init()
当路由器初始化成功之后，就可以通过访问不同的 URL 来实现网页的跳转了。
当路由框架匹配到 URL 时，会触发对应的处理方法（即 on、before、after 方法）。在这三个方法中，on 方法是必选的，而 before 和 after 方法是可选的。
其中，on 方法是要执行的处理逻辑。before 方法在 on 方法执行之前执行，可以实现例如权限验证等功能。after 方法在 on 方法执行之后执行，可以实现例如页面统计等功能。
实战案例
为了更好地理解 simple-javascript-router 的使用方法，我们来看一个具体的实战案例。
假设我们有一个名为 my-app 的单页面应用，需要根据 URL 不同来实现不同的页面跳转。具体的需求如下：
- 当 URL 为 / 时，显示首页。
- 当 URL 为 /login 时，跳转至登录页面。
- 当 URL 为 /register 时，跳转至注册页面。
- 当 URL 为 /about 时，跳转至关于我们页面。
- 当 URL 为 /404 时，显示 404 页面。
为了实现以上需求，我们可以编写如下代码：
-- -------------------- ---- -------
--------- -----
------
------
------------------------------- ------------
-------
------
---------------------------- ---------
-----
----
------ --------------------
------ -------------------------
------ ----------------------------
------ ---------------------------
------ ------------------------
-----
------
---- ----------------
------- -------------------------------------------------------------------------------------------
--------
--- ------ - --- --------
---- -
--- -------- -- -
----------------------------------------- - --------- ------ --------
-
--
--------- -
--- -------- -- -
------------- - -----------------------------------
-
--
------------ -
--- -------- -- -
------------- - --------------------------------------
-
--
--------- -
--- -------- -- -
------------- - -----------------------------------
-
--
---- -
--- -------- -- -
----------------------------------------- - -------- -----------
-
-
--
-------------
---------
-------
-------你可以将上述代码保存为 index.html 文件，然后在浏览器中打开该文件查看效果。
在代码中，我们首先创建了一个 Router 实例，并实例化了不同路由路径的处理逻辑。其中，on 方法被用来实现不同 URL 情况下的页面跳转。
以上代码示例演示了 simple-javascript-router 的大部分用法，通过深入的学习和理解，读者可以将其应用到实际开发中，提高自己的开发效率。
结语
simple-javascript-router 是一个十分优秀的 JavaScript 路由库，在前端开发中有着广泛的应用。本文通过介绍 simple-javascript-router 的基本使用和实际案例，希望可以帮助读者更好地理解和掌握该库。同时也希望读者在实际开发中，能够灵活运用路由这一技术，提高自己的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e3d9381d61a3540a29