http-hash-router 是一个基于 URL hash 的轻量级路由器。它非常适合前端开发者在构建单页应用时使用。在这篇文章中，我们将介绍如何使用 http-hash-router 进行前端开发。
什么是 http-hash-router？
http-hash-router 是一个纯 JavaScript 库，用于通过 URL hash （#）来管理单页应用程序的路由。它使用 URL hash 来获取“路由”，然后根据路由名称匹配方法并执行相应的代码。
安装 http-hash-router
首先，您需要在项目中安装 http-hash-router。使用 npm 来进行安装：
npm install http-hash-router --save
您还需要添加以下代码来加载这个包：
var Router = require('http-hash-router')使用 http-hash-router
现在，您已经安装了 http-hash-router ，接下来我们将介绍如何在项目中使用它。让我们先来创建我们的路由：
-- -------------------- ---- ------- -------- ----------- -- - -------------------- ------- - -------- ------------ -- - -------------- -- --- ----- ------- - -------- -------------- -- - -------------------- ----- - --- ------ - -------- --------------- ------------ -------------------- ------------- ---------------------- ---------------
在上面的代码中，我们创建了一个路由对象，并将三个不同的路由地址分别映射到不同的处理程序。
- / （主页） -> homeHandler() - /about （关于） -> aboutHandler() - /contact （联系我们） -> contactHandler()
接下来，我们需要将路由器应用到页面上。
var onRoute = router()
window.addEventListener('hashchange', function () {
onRoute(window.location.hash)
})在上面的代码中，我们使用 window.addEventListener 监听浏览器地址栏的变化，当 URL hash 改变时，我们传递新的 hash 给 onRoute 函数。onRoute 函数将根据提供的 hash 进行路由处理。
现在，我们已经完成了路由器的设置，用对应的方法处理浏览器 hash 变化。
示例代码
现在，让我们整合所有代码，展示如何使用 http-hash-router 来管理浏览器 hash。
-- -------------------- ---- ------- -- ---- --- ------ - --------------------------- -- -------- -------- ----------- -- - -------------------- ------- - -------- ------------ -- - -------------- -- --- ----- ------- - -------- -------------- -- - -------------------- ----- - -- ------ --- ------ - -------- -- ---- --------------- ------------ -------------------- ------------- ---------------------- --------------- -- ---------- --- ------- - -------- ------------------------------------- -------- -- - ----------------------------- -- -- ------ -- --------------------- --- --- - -------------------- - --- -
现在，您已经知道如何使用 http-hash-router 来管理浏览器地址栏的 URL hash。赶快尝试一下吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/58446