在前端开发中，我们经常会用到各种各样的第三方库，而 npm 包作为一种常见的包管理工具，方便了我们对于第三方库的安装和使用。在这篇文章中，我们将介绍一个常用的 npm 包 saddle，它是一个轻量级的前端路由库，适用于 SPA 的开发。
安装
使用 npm 安装 saddle：
npm install saddle
使用说明
在使用 saddle 的过程中，我们需要新建一个 router 实例，然后添加路由规则。
-- -------------------- ---- ------- ------ ------ ---- -------- ----- ------ - --- -------- --------------- -- -- - --------------------- -- -------------------- -- -- - ------------------------- -- ---------------------- -- -- - ------------------------- --
之后，我们需要调用 listen 方法来启动路由。
router.listen()
然后，在页面中点击链接或者使用浏览器前进和后退按钮，就能够触发路由规则的调用。例如：
<a href="/">主页</a> <a href="/about">关于我们</a> <a href="/contact">联系我们</a>
当用户点击链接或者使用浏览器前进和后退按钮时，console 中就会打印出相应的提示信息。
路由规则
在 saddle 中，我们可以通过字符串或者正则表达式来定义路由规则。例如：
router.add('/user/:id', (params) => {
console.log(`你正在查看用户 ID 为${params.id}的信息`)
})
router.add(/^\/post\/(\d+)$/, (params) => {
console.log(`你正在查看 ID 为${params[1]}的文章`)
})在上面的例子中，: 表示占位符，可以匹配任何字符，() 表示捕获的内容，可以在回调函数中使用。
路由历史记录
在一些情况下，我们需要获取当前路由的信息或者进行路由的跳转，这时候就需要使用到 saddle 提供的路由历史记录对象。
import { history } from 'saddle'
console.log(history.currentPath()) // 获取当前路由路径
history.push('/login') // 跳转到 /login 页面
history.replace('/register') // 用 /register 代替当前路径结语
本文介绍了 saddle 库的基本使用方法和一些常用的 API，但是实际上，saddle 的功能还远不止于此，它还有很多高级功能，如路由守卫、异步路由等。通过学习和使用 saddle，可以让我们更加方便快捷地进行 SPA 的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77767