简介
Rooker 是一款简单易用的前端路由管理工具，可以帮助前端开发者实现单页面应用的前端路由功能。使用 Rooker，可以让浏览器在不刷新页面的情况下，实现不同路由之间的页面切换。
安装
要使用 Rooker，需要先在本地项目中安装该 npm 包。可以使用以下命令来安装：
npm install rooker --save
安装完成后，可以在本地项目中使用 require() 函数来引用该包：
const Rooker = require('rooker')使用方法
使用 Rooker 主要包括以下两个方面的操作：
- 定义路由
- 监听路由变化
定义路由
要在 Rooker 中定义路由，需要使用 Rooker.route 函数。该函数的参数是一个对象，对象的键名为路由名，键值为回调函数。回调函数的参数是一个包含两个属性的对象：req 和 next。其中，req 对象表示请求，其中包含了当前路由的路径和参数等信息。next 是一个函数，用于触发下一个路由。
下面是一个简单的示例代码：
-- -------------------- ---- -------
--------------
---- -------- ----- ----- -
---------------------
------
--
------------ -------- ----- ----- -
----------------------- -- ---- --------------
------
-
--在上述示例代码中，我们定义了两个路由：根路由 / 和用户路由 /user/:id。当用户访问网站时，如果请求的 URL 为 /，则会进入根路由的回调函数，打印出一段文本；如果请求的 URL 为 /user/123，则会进入用户路由的回调函数，并打印出用户 ID 为 123。
监听路由变化
在定义好路由以后，需要使用 Rooker.listen 函数来监听路由变化。该函数的参数是一个回调函数，在回调函数中可以写入页面切换的逻辑：
Rooker.listen(function (req) {
console.log('路由切换至：', req.path)
})在上述示例代码中，我们使用 Rooker.listen 函数监听路由变化，并将当前路由的路径打印出来。
至此，我们已经使用 Rooker 完成了一次简单的路由管理操作。接下来我们将详细介绍 Rooker 的更多用法。
基础用法
获取参数
Rooker 支持在路由中获取参数。使用冒号 : 可以定义一个参数，参数会被解析为请求对象 req 的 params 属性中。例如：
Rooker.route({
'/user/:id': function (req, next) {
console.log('用户 ID 为：', req.params.id)
next()
}
})在上述示例代码中，我们定义了一个参数为 id 的用户路由。当用户访问 /user/123 时，Rooker 会将 123 解析为 req.params.id，并将该参数输出到控制台。
参数类型转换
Rooker 可以自动进行参数类型转换。例如，当你定义一个参数为 :id 的路由时，访问 /user/123 时，参数 id 的类型为字符串。如果你需要将 id 转成数字类型，则可以修改路由定义为：
Rooker.route({
'/user/:id': function (req, next) {
req.params.id = parseInt(req.params.id, 10)
console.log(req.params.id)
next()
}
})路由模式
Rooker 支持两种路由模式：hash 和 history。默认情况下，Rooker 使用 hash 模式。你可以使用 Rooker.routeMode 属性来更改路由模式：
Rooker.routeMode = 'history'
重定向
Rooker 支持对路由进行重定向。使用 Rooker.redirect 函数可以将当前路由重定向至其他路由：
Rooker.redirect('/user/abc')在上述示例代码中，我们使用 Rooker.redirect 函数将当前路由重定向至 /user/abc。
路由守卫
Rooker 支持在路由跳转前，通过 Rooker.beforeEach 函数添加路由守卫。路由守卫是一个回调函数，如果它返回 false，则当前路由将不会被跳转至目标路由。可以使用该函数实现登录、权限等判断逻辑。
-- -------------------- ---- -------
-------------------------- -------------- ------------ ----- -
-- --------
-- ------------ -
-----------
-------------------- -- ---------
------
-
------
--进阶用法
中间件
Rooker 支持使用中间件来对路由进行一些公共处理。例如：
-- -------------------- ---- ------- -------- -------- ----- - --------------------- --------- ------ - -------------- ---- ---- -------- ---- ------------ --- --
在上述示例代码中，我们定义了一个中间件 log，并将其应用于三个路由。中间件的回调函数具有和路由回调函数相同的参数，其中 req 表示请求，next 表示执行下一个函数。
命名路由
Rooker 支持通过命名路由来访问路由。命名路由需要在路由定义中使用 name 属性进行定义，例如：
Rooker.route({
name: 'home',
path: '/',
callback: function (req, next) {
console.log('进入了根路由')
next()
}
})在上述示例代码中，我们定义了一个名为 home 的根路由。现在我们可以使用 Rooker.push('home') 来跳转至该路由。
路由别名
Rooker 支持定义路由别名。使用别名可以在保留当前路由路径的情况下，使用不同的路由名称进行访问。
Rooker.route({
path: '/about',
alias: ['/about-us', '/about-me'],
callback: function (req, next) {
console.log('这是 about 页面')
next()
}
})在上述示例代码中，我们定义了一个路径为 /about 的路由，同时定义将 /about-us 和 /about-me 重定向至 /about。
总结
使用 Rooker，可以帮助前端开发者快速地实现前端路由管理功能。通过上述教程，相信你已经有了一定的了解和掌握，希望能对你的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057ca281e8991b448ebf85