Angular路由与导航

# 一、 理解Angular的路由和导航

## 1.1 什么是Angular路由？

在Angular应用中，路由是指将不同的组件与不同的URL路径相对应。通过路由，可以实现在不同的页面间导航，使用户能够在应用内部进行流畅的切换和访问不同的功能模块。

在Angular中，路由通过Router Module进行管理和配置，通过定义路由规则，可以实现页面的跳转和导航。

## 1.2 路由和导航的作用

路由和导航是Angular应用中非常重要的一部分，它可以帮助用户在应用中进行不同页面间的切换，同时通过路由参数可以传递数据，实现页面间的交互。

通过路由和导航，用户可以更加便捷地访问应用中的不同功能模块，提升了用户体验。

## 1.3 Angular路由模块的概述

Angular中的路由模块由RouterModule提供支持，它是Angular内置的一个模块，用于管理和配置应用中的路由规则。

通过引入RouterModule，并通过配置路由规则，可以实现不同URL路径与组件的对应关系，从而实现页面的导航和切换。

了解了Angular路由的基本概念和作用后，接下来可以深入学习如何在Angular应用中配置和使用路由，以实现更加丰富和灵活的页面导航功能。

## 配置Angular路由

在这一章节中，我们将深入了解如何配置Angular路由，包括安装和配置路由模块，创建路由配置，以及处理路由参数和重定向。让我们来一探究竟吧！
### 三、 路由导航和守卫

在Angular中，路由导航和守卫是非常重要的部分，能够控制用户在页面之间的跳转和导航，并且可以实现一些权限控制的功能。

#### 3.1 路由链接

在Angular中，我们可以使用`routerLink`指令来进行路由之间的导航。例如：

<a routerLink="/home">Home</a>
<a routerLink="/about">About</a>

上面的代码会把`routerLink`指令绑定到`<a>`标签上，用户点击时会触发对应的路由导航。

#### 3.2 路由跳转和导航

在组件中，可以使用`Router`服务来进行编程式的路由导航。

import { Router } from '@angular/router';

constructor(private router: Router) {}

// 在事件处理程序中进行路由导航
goToAboutPage() {
  this.router.navigate(['/about']);
}

上面的代码演示了如何在组件中使用`Router`服务进行路由导航。

#### 3.3 路由守卫的使用和作用

路由守卫可以帮助我们在用户导航到某个路由前，进行一些额外的操作，比如权限验证、数据预加载等。Angular中内置了一些路由守卫，比较常用的有`CanActivate`、`CanActivateChild`、`CanDeactivate`等。

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    // 在这里进行权限验证逻辑，返回true表示允许导航，返回false表示禁止导航
    return true;
  }
}

上面的代码展示了一个简单的权限验证的路由守卫，它可以通过`CanActivate`接口进行实现。

通过路由