什么是 @aurelia/router
@aurelia/router 是一个实现前端路由的 npm 包。它提供了一种简单而有效的方式来解决单页面应用（SPA）中的路由问题。
它是由 Aurelia 团队开发的，适用于使用 Aurelia 框架构建的应用程序。但它也可以在其他框架中使用，比如 React 或者 Vue。
安装
你可以通过运行下面的命令来安装 @aurelia/router：
npm install @aurelia/router
如何使用 @aurelia/router
要使用 @aurelia/router，你需要先初始化一个 Router 对象，然后定义路由规则。这些规则指定了应用程序的不同 URL 路径所对应的视图。
下面是一个简单的示例，展示了如何定义和导航到两个路由：
-- -------------------- ---- -------
------ --------------------- ------- ---- ------------------
------ ----- --- -
------- -------
----------------------- -------------------- ------- ------- -
------------
- ------ ---- -------- ----- ------- --------- -------- --
- ------ -------- ----- -------- --------- --------- -
---
----------- - -------
-
------------ -
-------------------------------------
-
-在上面的示例中，我们首先导入了 RouterConfiguration 和 Router 类，然后定义了一个 App 类。这个类有一个 router 属性，用来存储我们初始化的 Router 对象。
接下来，我们定义了 configureRouter 方法。这个方法接受两个参数：一个 RouterConfiguration 对象和一个 Router 对象。我们使用 config.map() 方法来定义了两个路由规则，分别是从根路径和 /home 跳转到 ./home 模块，以及从 /about 跳转到 ./about 模块。
最后，我们定义了一个 navigateTo() 方法，用来从一个路由转到另一个路由。在这个例子中，我们使用 this.router.navigateToRoute('about') 来从当前路由跳转到名为 about 的路由。
路由参数
我们可以使用路由参数来传递信息。例如，我们可以将一个 ID 作为参数传递给路由，然后在另一个页面中使用这个 ID 来获取相应的数据。
下面是一个示例，展示了如何定义和传递路由参数：
config.map([
{ route: 'users/:id', name: 'users', moduleId: './users' }
]);
this.router.navigateToRoute('users', { id: 123 });在上面的示例中，我们在路由规则中定义了一个参数 id。我们可以通过在路由名称后面加上 / 和参数值来传递路由参数。例如，使用 this.router.navigateToRoute('users', { id: 123 }) 来传递 id 参数值为 123。
在 users 模块中，我们可以通过 activatedRoute.params.id 来获取路由参数。
路由守卫
@aurelia/router 支持路由守卫。路由守卫是一种机制，用于在路由导航期间拦截并处理路由事件。
下面是一个示例，展示了如何使用路由守卫来处理授权问题：
-- -------------------- ---- -------
------ --------------- ---- ------------------
---------------------------------------
------------
- ------ --------- ----- --------- --------- ----------- ------ ------- ------ --------- - ----- ---- - -
---
----------------- - ---------- ---- ------------ ---------------------- -- -
-- ---------------------------------------- -- ------------------------ -
-- ----- -- --- ---- -- -------------
----- --------------- - ------------------------------
-- ------------------ -
------ --- ------------------
-
-
------ -----
--在上面的示例中，我们首先导入了 AuthorizeStep，然后使用 config.addAuthorizeStep() 方法将它添加到路由配置中。
接下来，我们定义了一个路由规则，其中使用了 settings.auth 属性来表示需要进行授权的路由。
在最后，我们定义了一个路由守卫，使用了 router.guardRoute() 方法来拦截路由事件。在这个守卫中，我们检查了每一个路由指令，找到需要进行授权的路由，然后判断用户是否已经进行了授权。如果没有进行授权，我们将其跳转到登录页面。
总结
@aurelia/router 提供了一种简单而强大的方式来实现前端路由。通过定义路由规则，传递参数以及使用路由守卫，我们可以轻松地处理多页面应用程序中的路由问题。
希望这篇文章能够帮助你了解 @aurelia/router 的基本使用方法，并能够在实际项目中应用它来实现更加复杂的路由功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcaa6b5cbfe1ea061247a