在前端开发中，路由是一个十分重要的概念。为了方便地实现路由，我们可以使用 npm 包 enroute。enroute 是一个轻量级、灵活的路由库，适用于 React、Vue、Angular 等各种前端框架。
安装 enroute
使用 npm 安装 enroute。
npm install enroute --save
使用 enroute
定义路由和处理程序
在 enroute 中，我们需要定义路由和对应的处理程序。
-- -------------------- ---- ------- ------ ------------ ---- ---------- ----- ------ - -------------- ----- ---- ------ --------- ----- ------------ --- ----- ---------- - -- -- - -------------------- -- ----- ----------- - -- -- - --------------------- -- ----- ---------- - -------- -- - ----------------- --------------- -- ----------------------- ------------ ------------------------ ------------- ----------------------- ------------
上面的代码定义了三个路由：home、about 和 user。其中，user 路由接受一个参数 id。
然后，定义对应的处理程序：handleHome、handleAbout 和 handleUser。
最后，将路由和处理程序注册到路由器中。
匹配路由
在浏览器的 URL 发生变化时，我们需要匹配对应的路由和处理程序。
-- -------------------- ---- -------
-- ------ --- --
----------------------------------- -- -- -
----- ----- - ---------------------------------------
-- ------- -
-----------------------
-
---
-- ------
---------------------------- --- -----
---------------------------- --- -------------
-- -----
-- ----
-- ---- ---在浏览器的 URL 发生变化时，我们可以使用 window.addEventListener('popstate', handler) 监听浏览器地址的变化。然后，使用 router.match(url) 找到对应的路由，并执行对应的处理程序。
上面的示例代码手动模拟浏览器地址的变化，输出了对应的结果。
总结
enroute 是一个简单易用的前端路由库。通过定义路由和对应的处理程序，再配合浏览器地址的监听和路由匹配，我们可以很方便地实现前端路由效果。
在实际的开发中，我们可以在 enroute 基础上定制自己的路由库。比如，可以增加权限控制、路由缓存等功能，以满足实际需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e26a563576b7b1ecf3f