在 Angular 中如何使用路由 (Router)-JavaScript中文网-JavaScript教程资源分享门户

Angular 是一个流行的前端框架，它提供了强大的路由功能，可以让你轻松地管理应用程序中的页面之间的导航。在本文中，我们将深入探讨 Angular 中如何使用路由，包括路由配置、参数传递以及路由守卫等方面。

路由配置

在 Angular 应用程序中，路由配置是指定义了应用程序中每个页面的 URL 和组件之间的映射关系。要使用 Angular 中的路由功能，我们需要首先在应用程序中引入路由模块。

import { RouterModule, Routes } from '@angular/router';

接下来，我们需要定义一个路由数组，用于配置应用程序中的路由。

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

在上面的代码中，我们定义了三个路由：

第一个路由是根路径，当用户访问应用程序的根路径时，将自动重定向到 /home 路径。
第二个路由是 home 路径，它将会显示 HomeComponent 组件。
第三个路由是 about 路径，它将会显示 AboutComponent 组件。

在定义完路由之后，我们需要将路由配置添加到应用程序的模块中。

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppModule { }

导航和参数传递

在应用程序中使用路由时，最常见的用例是导航到不同的页面，并通过 URL 参数向目标页面传递一些数据。

参数传递

在 Angular 中，我们可以使用路由参数向目标组件传递数据。在路由配置中，我们可以使用 :param 来定义一个参数。

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about/:id', component: AboutComponent }
];

在上面的示例中，我们定义了一个名为 id 的参数。要想向 about 组件传递参数，我们可以使用 Router 的 navigate 方法，并将参数添加到路径中。

this.router.navigate(['/about', 123]);

在 about 组件中，我们可以使用 ActivatedRoute 服务来获取参数。

-- -------------------- ---- -------
------ - -------------- - ---- ------------------

------------------- ------ --------------- - -

---------- -
  ---------------------------------- -- -
    -----------------------
  ---
-

在上面的示例中，我们使用 params 方法来获取路由参数。

路由守卫

路由守卫可以用于在导航到页面之前执行一些逻辑。在 Angular 中，路由守卫通常用于实现权限控制、登录验证等功能。

Angular 提供了四种不同类型的路由守卫。

CanActivate：在导航到某个路由时执行，用于确定是否允许导航。
CanActivateChild：在导航到某个子路由时执行，用于确定是否允许导航。
CanDeactivate：在导航离开某个路由时执行，用于确定是否允许导航。
Resolve：在导航到某个路由时执行，用于在路由被激活之前获取一些数据。

这里以 CanActivate 守卫为例，介绍如何实现路由守卫。

-- -------------------- ---- -------
-------------
  ----------- ------
--
------ ----- --------- ---------- ----------- -

  ------------------- ------------ ------------ ------- ------- ------- - -

  ------------------ ----------------------- ------ --------------------- ------- - ------- -
    -- ------------------------------- -
      ------ -----
    -

    ------ --------------------------------------
  -
-

在上面的示例中，我们定义了一个名为 AuthGuard 的守卫，并实现了 CanActivate 接口。在 canActivate 方法中，我们首先使用 AuthService 来检查用户是否已经登录。如果用户已经登录，我们返回 true。如果用户未登录，我们使用 createUrlTree 方法生成一个与 /login 路径对应的 UrlTree 对象，并返回该对象，以便路由服务将用户重定向到登录页。

要使用定义的路由守卫，我们需要在路由配置中为需要守卫的路由添加 canActivate 属性。

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about/:id', component: AboutComponent, canActivate: [AuthGuard] }
];

在上面的示例中，我们为 /about/:id 路由添加了 canActivate 守卫，并指定 AuthGuard 类型。

总结

在本文中，我们深入探讨了 Angular 中如何使用路由。我们介绍了路由配置、参数传递以及路由守卫等方面的内容，并通过示例代码详细地演示了如何在应用程序中使用路由。希望读者可以通过本文对 Angular 的路由功能有更深入的了解，以便于在实际开发中能够更加灵活地运用这一功能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/648c3e3348841e9894a95574