在前端开发流程中，路由是一个非常重要的概念。它允许用户在网站或应用程序中导航到不同的页面或视图。而 redrouter 这个 npm 包就是一个轻量级、快速的路由器，它允许您轻松地在应用程序中设置和管理路由。在本文中，我们将学习如何使用 redrouter ，并提供一些示例代码。
安装 redrouter
要使用 redrouter ，首先需要将它安装到您的项目中。您可以使用以下命令在您的项目根目录中进行安装：
npm install redrouter在安装过程中，npm 将自动下载并安装所有依赖项。
安装完毕后，如何使用 redrouter？
使用 redrouter 的第一步是导入它。在您的 JavaScript 文件中，包含以下代码：
import RedRouter from 'redrouter';
接下来，您需要创建一个新的 RedRouter 实例。您可以在应用程序的任何地方创建该实例，但在本文中，我们将其创建在应用程序的顶部作为全局变量：
const router = new RedRouter();
现在，您可以使用 add() 方法将路由添加到应用程序中。 例如，以下代码将在路由器中添加一个名为 "home" 的路由：
router.add('home', '/', () => { console.log('This is the home page!'); });
该 add() 方法需要三个参数。第一个参数是您所要设置的路由的名称，第二个是您要匹配的 URL，第三个是要运行的回调函数。在上面的代码中，我们添加了一个名为 "home" 的路由，，并将该路由与根 URL 匹配。我们还提供了一个简单的回调函数，当用户访问 home 页面时，将在浏览器的控制台中输出一条消息。
您可以使用 add() 方法添加任意数量的路由。例如，以下代码将添加一个名为 "about" 的路由，并将其与 URL "/about" 匹配：
router.add('about', '/about', () => { console.log('This is the about page!'); });
现在，在用户访问 "about" 页面时，将输出一条不同的消息。
您还可以使用 go() 方法在应用程序中导航。例如，以下代码将用户导航到名为 "home" 的页面：
router.go('home');
在这个例子中，我们使用了路由命名，但您也可以使用完整的 URL 来导航。
使用参数化 URL
上面的示例中，我们使用了纯文本字符串来设置 URL。但是，redrouter 还支持参数化 URL。例如，以下代码将添加一个名为 "user" 的路由，并将其与 URL "/user/:id" 匹配：
router.add('user', '/user/:id', (params) => { console.log(`This is the user page for user ${params.id}.`); });
在这个示例中，我们使用了参数化 URL（"：id"），这意味着可以匹配任何包含 "user/" 的 URL。当用户访问此 URL 时，params 对象将包含值为 "id" 的属性，它的值是参数的实际值。
例如，当用户访问 "/user/123" 时，回调中的 params 对象将包含以下内容：
{ id: '123' }
这允许您在路由器中动态处理 URL。
路由回调参数
最后，让我们来看一下我们在之前添加的回调函数。回调函数会在路由匹配时被调用，并接收一个名为 "params" 的对象作为参数。该对象包含路由 URL 中所有参数的键值对。
例如，以下代码将添加一个名为 "product" 的路由，并将其与 URL "/product/:id" 匹配：
router.add('product', '/product/:id', (params) => { console.log(`This is the product page for product ${params.id}.`); });
如您所见，我们将回调函数设置为输出一个产品页面的消息，并在消息中引用了 params.id。在路由匹配时，路由器将自动从 URL 中提取参数并将其传递给回调函数。
总结
在本文中，我们学习了如何使用 redrouter NPM 包。我们了解了如何添加路由、导航到不同的页面和使用参数化 URL 处理动态 URL。我们还探讨了回调函数所接收的参数。现在您可以在自己的项目中使用 redrouter 来设置和管理路由了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8a73
