Angular 单页应用 (SPA) 路由实例教程-JavaScript中文网-JavaScript教程资源分享门户

单页应用 (SPA) 作为一种前端开发技术，越来越受到人们的关注。而 Angular 作为一种常用的前端框架，也提供了丰富的路由功能来支持单页应用的开发。本文将为您介绍如何使用 Angular 的路由功能实现单页应用的跳转、参数传递和路由守卫等功能。

Angular 路由

Angular 的路由是指导导航的一种机制，它可以将用户从一个视图导航到另一个视图，同时还可以传递参数、保护路由等。在 Angular 中，路由是以 URL 的形式来表示的。以下是 Angular 路由的一些基本概念：

Router：负责监听 URL 的变化，并根据配置表中的规则来实现视图的导航；
Routes：路由配置表，本质上是一个数组，其中的每一项配置规定了一个路由；
Route：路由配置项，包括该路由的 URL、路由参数、组件等信息。
ActivatedRoute：表示当前正在活动的路由；
RouterState：表示当前的路由状态。

单页应用的实现

对于单页应用而言，路由的重要性不言而喻。它是 SPA 中实现视图切换以及地址栏 URL 更新的关键性工具。以下是一个简单的单页应用路由实例：

设置路由

在应用中定义路由配置：

// javascriptcn.com 代码示例
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { DetailComponent } from './detail/detail.component';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'detail/:id', component: DetailComponent },
];

在该路由配置表中，我们定义了三个路由。其中，HomeComponent 对应的路由是应用的默认路由。当用户访问应用根路径时，显示该组件；AboutComponent 对应的路由是 /about，访问该地址时将显示该组件；DetailComponent 对应的路由是 /detail/:id，该路由可以接收一个 ID 参数，用于跳转到该 ID 对应的详情页面。需要注意的是，路由参数可以通过 : 的形式进行定义。

解析路由

接着，我们需要在模块中引入 RouterModule 和路由配置表：

// javascriptcn.com 代码示例
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { DetailComponent } from './detail/detail.component';

const appRoutes: Routes = [
  // ...
];

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

在组件中调用路由：

// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {}

  onClick() {
    this.router.navigate(['/about']);
  }
}

在该组件的按钮点击事件中，我们通过 this.router.navigate() 跳转到了 AboutComponent 对应的路由。

路由参数

在路由配置表中，我们定义了一个 DetailComponent 并且允许该路由接收一个 ID 参数。那么如何在组件中接收路由参数呢？我们可以通过 ActivatedRoute 对象来获取当前激活的路由，然后从该对象中获取参数：

// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.scss']
})
export class DetailComponent implements OnInit {
  id: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.id = params.get('id');
    });
  }
}

在 ngOnInit() 函数中，我们使用 this.route.paramMap 的 subscribe() 方法来订阅参数的变化事件。这样，当路由参数发生变化时，我们就可以获取最新的参数并加载相应的数据了。

路由守卫

除了以上的功能之外，路由还允许我们通过路由守卫来控制特定的路由是否允许被访问。可以通过实现 CanActivate 接口来实现路由守卫。在该接口的 canActivate() 方法中，我们可以根据需求判断是否允许用户访问该路由：

// javascriptcn.com 代码示例
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LoginGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    const isLoggedIn = true; // 根据需求实现逻辑
    if (!isLoggedIn) {
      this.router.navigateByUrl('/login');
    }
    return isLoggedIn;
  }
}

在该路由守卫中，我们根据需求实现了用户登录认证的逻辑。如若用户未登录，则禁止访问该路由。

总结

本文简单介绍了 Angular 实现单页应用的路由功能，并介绍了路由参数、路由守卫的使用方法。希望能为您学习和使用 Angular 带来一定的帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654da8e57d4982a6eb715a45