在开发前端应用中，路由器是必不可少的一部分。在使用 React、Vue 等框架时，通常会使用对应框架自带的路由器实现页面之间的跳转。但在一些特殊的场景下，我们需要自己手动实现路由功能，这时候就可以使用第三方 npm 包 broute。
什么是 broute？
broute 是一个基于浏览器 history API 和 Hash URL 实现的轻量级路由器。它提供了简单易用的 API，使得我们可以轻松地实现前端路由功能。
如何使用 broute？
安装
使用 npm 安装 broute：
npm install broute --save
基本使用
假设我们有以下页面需求：首页、用户列表页、用户详情页。
初始化
首先，我们需要在项目中初始化 broute：
import { Router } from 'broute';
const router = new Router({
mode: 'history',
root: '/app',
});其中 mode 参数有两个取值：history、hash。在 history 模式下，broute 使用浏览器的 history API 实现路由，而在 hash 模式下则使用 hash URL 实现路由。root 参数是应用的根目录路径。
注册路由
接下来我们需要注册具体的路由，可以在任意组件中进行注册。这里以注册首页为例：
router.register('/', async () => {
const res = await fetch('/api/home');
const data = await res.json();
return data;
});在这个例子中，我们将 / 路径映射为 async 函数（此处使用了 async/await 语法糖，需要确保代码在支持该语法糖的环境下运行）。当用户访问 / 路径时，broute 会自动调用该函数并将结果渲染到页面中。
路由跳转
我们可以通过以下方式手动实现页面跳转：
router.navigate('/user/list');高级用法
在 broute 中，我们还可以通过一些高级用法实现更复杂的路由功能。
动态路由
动态路由是指在路由路径中嵌入参数，例如 /user/:id。我们可以通过以下方式注册动态路由：
router.register('/user/:id', async (params) => {
const res = await fetch(`/api/user/${params.id}`);
const data = await res.json();
return data;
});当用户访问 /user/1 路径时，broute 会自动将参数 1 传递给路由函数中的 params 参数，我们可以通过 params.id 的方式获取该参数，并使用它获取对应的数据。
中间件
在一些情况下，我们需要在每次路由跳转或路由注册时执行一些公共逻辑。我们可以使用中间件来实现这个功能：
-- -------------------- ---- ------- -- ----- ---------------- ---- ----- ----- -- - --------------- -- ----- ---- ---------- ------- --- -- ---- ------------------------- ----- -- -- - ------ -------- ---
在这个例子中，我们注册了一个中间件，该中间件会在每次路由跳转时执行。to 代表目标路由，from 代表来源路由。通过调用 next 函数来继续执行后面的路由处理逻辑。
完整示例代码
-- -------------------- ---- ------- ------ - ------ - ---- --------- ----- ------ - --- -------- ----- ---------- ----- ------- --- ---------------- ---- ----- ----- -- - --------------- -- ----- ---- ---------- ------- --- -------------------- ----- -- -- - ----- --- - ----- ------------------- ----- ---- - ----- ----------- ------ ----- --- ---------------------------- ----- -------- -- - ----- --- - ----- -------------------------------- ----- ---- - ----- ----------- ------ ----- --- ------------------------- ----- -- -- - ------ -------- --- ---------------------------
总结
使用 broute，我们可以轻松地实现前端路由功能，在 React、Vue 等现代前端框架中也可以使用该库来实现路由。希望本文对你有所帮助，如有不足之处，欢迎指正。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8accdc64669dde5263