在前端开发中，路由是非常重要的一部分。它可以帮助我们构建出一个有层级结构的应用，方便页面之间的切换和交互。而 npm 包 object-router 则提供了一种新的方式来管理路由，它可以帮助我们更加方便地组织和控制路由的行为和转换。
object-router 简介
object-router 是一个基于对象的路由器，它使用纯 JavaScript 代码来构建路由，并支持异步加载模块、动态路由、路由嵌套等特性。它可以帮助我们更好地组织和控制我们的路由结构，从而生成一个具有层级关系的应用。
相比于传统的路由机制，object-router 具有以下优点：
- 纯 JavaScript 代码，易于读写和维护。
- 支持异步加载模块，可以实现按需加载。
- 支持动态路由，可以根据需要生成路由规则。
- 支持路由嵌套，可以更好地组织路由结构。
下面，我们来详细了解一下如何使用 object-router 来构建一个完整的前端应用。
安装和使用
首先，我们需要使用 npm 来安装 object-router 包，可以通过以下命令来进行安装：
npm install object-router
安装完成后，我们就可以在项目中引入 object-router 包。具体用法如下所示：
-- -------------------- ---- ------- ------ - ------ - ---- ---------------- ----- ------ - --- --------- --------------- ----- -- -- - -- --- --- -------------------- ----- -- -- - -- --- --- ------------------------ ----- ----- -- - ----- ---- - ----- --------------------------------- -- --- --- --------------
以上代码创建了一个 Router 实例，并使用 router.add() 方法来添加路由规则。路由规则中可以包含动态参数，例如 /users/:id 就是一个动态路由规则，其中 id 表示一个动态参数。在路由被匹配时，object-router 会将动态参数解析出来，并将其存放在 ctx.params 对象中，我们可以从中获取到具体的参数值。在 async 函数中，我们可以进行一些异步操作，例如发送请求获取数据等。
最后，使用 router.load() 方法来启动路由器，并开始监听路由事件。当用户访问相应的路由时，路由器就会根据我们定义的路由规则来匹配路径，并执行对应的回调函数。因此，在我们的应用中应该保证只有一个路由器实例被创建。
object-router 的常用 API
Router.add(route: string, handler: async function)
用于添加一个路由规则。其中 route 表示路由路径，可以使用动态参数，例如 /users/:id。handler 是一个 async 函数，表示路由被匹配时要执行的回调函数。在回调函数中，我们可以进行一些异步操作，例如发送请求获取数据等。
Router.load()
用于启动路由器并开始监听路由事件。当用户访问相应的路由时，路由器就会根据我们定义的路由规则来匹配路径，并执行对应的回调函数。应该保证只有一个路由器实例被创建。
Router.navigate(route: string)
用于手动跳转到指定的路由页面。这个方法可以让我们通过代码来实现路由跳转，从而达到控制页面流转的目的。例如，当用户点击某个按钮时，我们可以通过 Router.navigate() 方法来手动跳转到下一个页面。
Router.beforeEachHandler(handler: async function)
用于注册全局的路由前置守卫。当用户访问任意路由时，object-router 都会先执行注册的路由前置守卫。在回调函数中，我们可以进行一些前置操作，例如判断用户是否已经登录等。
Router.afterEachHandler(handler: async function)
用于注册全局的路由后置守卫。当用户访问任意路由时，object-router 都会在路由回调函数执行完毕后，再执行注册的路由后置守卫。在回调函数中，我们可以进行一些后置操作，例如清除数据等。
示例代码
下面，我们来通过一个简单的示例来了解如何使用 object-router 来构建一个前端应用。假设我们要构建一个简单的 todo 应用，它有两个页面，一个是待办事项列表页面，一个是添加待办事项的页面。
首先，在我们的项目中创建一个 router.js 文件，并写入如下代码：
-- -------------------- ---- ------- ------ - ------ - ---- ---------------- ----- ------ - --- --------- ------------------------------ ----- -- - -- ------------------------------ --- ----------------------------- ----- -- - -- -------------------------- --- --------------- ----- -- -- - -- ---------- --- ----------------------- ----- -- -- - -- ---------- --- ---------------------------- ----- ----- -- - -- -------------- -- ---------- --- -------------- ------ ------- -------
在上述代码中，我们首先创建了一个 Router 实例，并注册了一个全局的路由前置守卫和路由后置守卫。在路由规则中，我们使用了动态路由来获取待办事项的 id，从而根据 id 参数来加载对应的待办事项数据。这里的 async 函数中我们还可以做其他的事情，例如向服务器发送请求、重定向到其他页面等。
然后，在我们的应用中使用 router.js 文件中导出的 router 实例，例如在主入口文件中：
import router from './router';
router.navigate('/');在以上代码中，我们通过调用 router.navigate 方法来跳转到指定的页面，这里我们跳转到了待办事项列表页面。这个方法可以在应用的其他地方使用，例如在点击某个按钮或者链接时，就可以通过这个方法来实现路由跳转。
最后，我们来看一下如何在待办事项列表页面中实现添加待办事项的功能。我们可以先在列表页面中添加一个“添加”按钮，并绑定一个点击事件：
<button id="add-todo-btn">添加</button>
然后，在对应的 JavaScript 文件中，我们可以通过向调用 router.navigate() 方法来达到路由跳转的目的：
import router from './router';
document.querySelector('#add-todo-btn').addEventListener('click', () => {
router.navigate('/add-todo');
});在这里，我们通过获取 DOM 元素并绑定点击事件，然后在点击时调用 router.navigate() 方法来实现路由跳转。当用户点击添加按钮时，就会跳转到添加待办事项页面。在添加页面中，我们可以通过调用一些 API 来保存数据、发送请求等操作。这些操作可以通过将对象传递到 router.navigate() 方法中的 data 参数来实现，在下一个页面中通过 ctx.state 来获取。
总结
在本文中，我们详细了解了 npm 包 object-router 的使用教程。object-router 是一个基于对象的路由器，它使用纯 JavaScript 代码来构建路由，并支持异步加载模块、动态路由、路由嵌套等特性。通过使用 object-router，我们可以更加方便地组织和控制路由的行为和转换，从而生成一个具有层级关系的应用。在实际开发中，我们可以通过熟悉 object-router 的 API 来快速构建一个前端应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f9c3d1de16d83a66eaf