简介
vanillajs-router 是一个基于原生 JavaScript （Vanilla JavaScript）实现的路由库。它可以将 URL 映射到 JavaScript 函数上，从而实现对页面的控制和改变。
该库只有不到 3KB，非常轻量级，并且不依赖于其他任何库或框架。它相当于 Angular、React 或 Vue 的轻量级替代品，可以更灵活地控制你的应用程序。
该教程将深入介绍该库的使用方法，帮助你更好地理解和掌握该技术，从而更好地构建你的 JavaScript 应用程序。
安装
你可以通过 npm 安装 vanillajs-router：
npm install vanillajs-router
或者，你可以直接在 HTML 中引用该库：
<script src="path/to/vanillajs-router.js"></script>
使用
创建 router 实例
我们首先需要创建一个 vanillajs-router 的实例：
const router = new VanillajsRouter();
注册路由
要注册路由，可以使用 add 方法。该方法接受三个参数：
- 规则：一个字符串，代表 URL 规则。可以包含参数，参数以
:开头，例如："/users/:id"。 - 回调函数：一个函数，当路由规则匹配时，将被调用。
- 选项（可选）：一个对象，包含以下可选属性：
listen：如果为true，则注册后会立即开始监听该路由（默认为false）。
以下是一个例子，我们注册了一个路由规则为 "/home"：
router.add("/home", () => {
console.log("这是主页。");
});监听路由
要监听路由，可以调用 listen 方法。该方法没有参数，当 URL 的哈希值（fragment）发生变化时，将自动调用路由规则中匹配的回调函数。
以下是一个例子，当 URL 中出现 #/home 时，将自动调用对应的路由：
router.listen();
跳转路由
要跳转路由，可以使用 go 方法。该方法接受一个字符串参数，代表要跳转的 URL。
以下是一个例子，我们跳转到 "/home" 路由：
router.go("/home");带参数路由
我们可以在路由规则中使用参数，例如：
router.add("/users/:id", (params) => {
console.log(`用户 ID 为 ${params.id}。`);
});如上所示，我们可以在 params 参数中获取路由规则中的参数。
我们可以像这样跳转到带参数的路由：
router.go("/users/1");嵌套路由
我们可以使用 router.add 来注册嵌套路由。例如：
-- -------------------- ---- ------- ----- ------ - --- ------------------ --------------- -- -- - --------------------- --- ----- ----------- - --- ------------------ -------------------- -- -- - ------------------------ --- ------------------------- -- -- - ---------------------------- --- -------------------- -- -- - ------------------------ --------------------- --- ----------------
如上面的例子，我们创建了一个管理员路由，嵌套在主路由中。当 URL 中出现 #/admin 时，将启动管理员路由，并显示管理员主页。
更多 API
除了上面提到的 API，vanillajs-router 还提供了一些其他的 API，例如：
remove(rule)：删除指定的路由规则。navigate(url)：在当前页面中导航到指定 URL，并触发对应的路由函数。before(callback)：注册一个全局的“前置钩子”，用于在路由函数调用前进行一些操作，例如登录认证。after(callback)：注册一个全局的“后置钩子”，用于在路由函数调用后进行一些操作，例如统计 PV 和 UV。
结论
vanillajs-router 是一个非常简单、灵活、易用的 JavaScript 路由库。它可以帮助我们更好地构建 JavaScript 应用程序，并提供了一些非常有用的 API，例如参数化路由、嵌套路由、前置钩子和后置钩子等。
当然，对于一个成熟的 Web 应用程序而言，可能需要更复杂、更强大的路由库，例如 React Router、Angular Router 或 Vue Router 等。但是，对于一些简单的应用程序而言，vanillajs-router 可以很好地满足我们的需求。
代码范例：
-- -------------------- ---- ------- ----- ------ - --- ------------------ --------------- -- -- - --------------------- --- -------------------- -- -- - ----------------------- --- ------------------------ -------- -- - --------------- -- - ---------------- --- ----- ----------- - --- ------------------ -------------------- -- -- - ------------------------ --- ------------------------- -- -- - ---------------------------- --- -------------------- -- -- - ------------------------ --------------------- --- ---------------- --------------------------------------------------------------- -- -- - -------------------- --- -------------------------------------------------------------- -- -- - ---------------------- --- --------------------------------------------------------------- -- -- - -------------------- ---
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b42c6eb7e50355dbd24