当我们开发前端应用时，经常需要创建路由来控制页面的跳转和展示。前端路由是一种将 URL 与页面或组件相匹配的方法。在这里，我们将介绍一个叫做 "ruta" 的 npm 包来帮助我们创建路由。
什么是 ruta?
ruta 是一个轻量级的 JavaScript 路由库，可用于为单页面应用程序（SPA）创建路由。它具有以下特点：
- 无其他依赖库
- 支持动态路径
- 支持路由重定向
- 使用 clean URLs(干净的URL)
- 可以解决 history API 兼容性问题
如何安装 ruta?
首先，我们需要通过 npm 安装 ruta:
npm install ruta --save
如何使用?
首先，我们需要在 js 文件中导入 ruta:
import { Router } from 'ruta';接下来，我们需要创建一个路由实例:
const router = new Router();
添加路由
接下来，我们要添加一些路由:
-- -------------------- ---- ------- ------------------ -- -- - -- -- --- -- --- ------------------------------------ ---- -- - -- -- ------------ -- --- ----------------------------------------------------- ---- ------- -- - -- -- ----------------- - ------------------- -- --- ------------- -- - -- -- --- -- ---
如上所述，我们可以添加几个路由，根据正则表达式匹配 URL，然后执行相应的处理函数。
启动路由
一旦我们添加了所有路由，接下来需要启动 route:
router.start();
我们已经可以使用 ruta 来构建路由了！例如，对于URL "http://example.com/users/123/edit"，将调用回调函数 (id, action)，其中 id 为 "123" 且 action 为 "edit"。
使用 location.hash
一般来说，使用 location.hash 来控制路由更容易，我们可以使用 hash 片段覆盖传统 URL 路径。Ruta 有一个帮助函数，可以使用当前 URL 的 hash 片段来自动重定向到清晰的 URL 地址：
router.useHash = true; router.start();
现在，当我们访问 "http://example.com/#/users/123/edit" 时，ruta 会自动将其重定向到清晰的 URL 地址 "/users/123/edit" 。
动态路由
我们可以使用正则表达式捕获动态路由中的参数。例如，我们可能希望允许用户通过URL /users/:id 去查看不同用户的详细信息。Ruta 允许我们通过正则表达式构建类似的动态路由：
router.add(/^\/users\/([^\/]*)\/?$/, (id) => {
console.log('Welcome user ID#' + id);
});此路由将匹配任何 URL 类似于 "/users/2"，其中数字 2 可以是任意数字，ruta 将为我们解析 id 参数并调用回调函数。
路由重定向
有些时候，用户可能在 URL 中使用不正确的路径。我们可能希望将他们自动重定向到正确的路径。例如，假设我们将所有用户的详细信息都放在 URL "/users/:id" 下：
router.add(/^\/users\/([^\/]*)\/?$/, (id) => {
console.log('Welcome user ID#' + id);
});
router.add(/^\/user\/([^\/]*)\/?$/, (id) => {
router.redirect('/users/' + id); // 重定向到正确路径
});这样，当一个用户访问 "/user/2" 时，ruta 将自动将其重定向到 "/users/2"。
总结
在本教程中，我们介绍了如何使用路由包 ruta 来创建 JavaScript 路由。我们学习了如何使用路由来控制页面的跳转和展示，如何动态地构建路由以及如何处理重定向问题。希望读者能够通过本教程学会使用 ruta，并能够更好地应用到实际项目中。
示例代码
路由器初始化：
import { Router } from 'ruta';
export const router = new Router();主路由：
-- -------------------- ---- ------- ------ - ------ - ---- ----------- -------------- -- -- - ----------------- ------- --- ------------------- -- -- - ------------------ ------- --- --------------- -- -- - ---------------- ------- --- --------------------
子路由：
-- -------------------- ---- ------- ------ - ------ - ---- ----------- -------------------------- ---- -- - -------------------- ----- ---- --- ---------------------- -- -- - -------------------- ------- --- --------------------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/78296