广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

本篇文章带大家深入了解一下Angular中的路由，看看快速上手的方法，介绍一下匹配规则、路由传参、路由嵌套、路由守卫等，希望对大家有所帮助！

在 Angular 中，路由是以模块为单位的，每个模块都可以有自己的路由。【相关教程推荐：《angular教程》】

创建页面组件、Layout 组件以及 Navigation 组件，供路由使用

创建首页页面组件ng g c pages/home

创建关于我们页面组件ng g c pages/about

创建布局组件ng g c pages/layout

创建导航组件ng g c pages/navigation

创建路由规则

// app.module.tsimport { Routes } from "@angular/router"const routes: Routes = [  {    path: "home",    component: HomeComponent  },  {    path: "about",    component: AboutComponent  }]

引入路由模块并启动

// app.module.tsimport { RouterModule, Routes } from "@angular/router"@NgModule({  imports: [RouterModule.forRoot(routes, { useHash: true })],})export class AppModule {}

添加路由插座

<!-- 路由插座即占位组件 匹配到的路由组件将会显示在这个地方 --><router-outlet></router-outlet>

在导航组件中定义链接

<a routerLink="/home">首页</a><a routerLink="/about">关于我们</a>

1、重定向

const routes: Routes = [  {    path: "home",    component: HomeComponent  },  {    path: "about",    component: AboutComponent  },  {    path: "",    // 重定向    redirectTo: "home",    // 完全匹配    pathMatch: "full"  }]

2、404 页面

const routes: Routes = [  {    path: "home",    component: HomeComponent  },  {    path: "**",    component: NotFoundComponent  }]

<a routerLink="/about" [queryParams]="{ name: 'kitty' }">关于我们</a>

import { ActivatedRoute } from "@angular/router"export class AboutComponent implements OnInit {  constructor(private route: ActivatedRoute) {}  ngOnInit(): void {    this.route.queryParamMap.subscribe(query => {      query.get("name")    })  }}

2、动态参数

const routes: Routes = [  {    path: "home",    component: HomeComponent  },  {    path: "about/:name",    component: AboutComponent  }]

<a [routerLink]="['/about', 'zhangsan']">关于我们</a>

// app.module.tsimport { RouterModule, Routes } from "@angular/router"@NgModule({  imports: [RouterModule.forRoot(routes, { useHash: true })],})export class AppModule {}0

路由嵌套指的是如何定义子级路由

// app.module.tsimport { RouterModule, Routes } from "@angular/router"@NgModule({  imports: [RouterModule.forRoot(routes, { useHash: true })],})export class AppModule {}1

// app.module.tsimport { RouterModule, Routes } from "@angular/router"@NgModule({  imports: [RouterModule.forRoot(routes, { useHash: true })],})export class AppModule {}2

将子级路由组件显示到不同的路由插座中

// app.module.tsimport { RouterModule, Routes } from "@angular/router"@NgModule({  imports: [RouterModule.forRoot(routes, { useHash: true })],})export class AppModule {}3

// app.module.tsimport { RouterModule, Routes } from "@angular/router"@NgModule({  imports: [RouterModule.forRoot(routes, { useHash: true })],})export class AppModule {}4

// app.module.tsimport { RouterModule, Routes } from "@angular/router"@NgModule({  imports: [RouterModule.forRoot(routes, { useHash: true })],})export class AppModule {}5

// app.module.tsimport { RouterModule, Routes } from "@angular/router"@NgModule({  imports: [RouterModule.forRoot(routes, { useHash: true })],})export class AppModule {}6

// app.module.tsimport { RouterModule, Routes } from "@angular/router"@NgModule({  imports: [RouterModule.forRoot(routes, { useHash: true })],})export class AppModule {}7

将根模块中的路由配置抽象成一个单独的路由模块，称之为根路由模块，然后在根模块中引入根路由模块

// app.module.tsimport { RouterModule, Routes } from "@angular/router"@NgModule({  imports: [RouterModule.forRoot(routes, { useHash: true })],})export class AppModule {}8

// app.module.tsimport { RouterModule, Routes } from "@angular/router"@NgModule({  imports: [RouterModule.forRoot(routes, { useHash: true })],})export class AppModule {}9

路由懒加载是以模块为单位的。

创建用户模块 ng g m user --routing=true 并创建该模块的路由模块

创建登录页面组件 ng g c user/pages/login

创建注册页面组件 ng g c user/pages/register

配置用户模块的路由规则

<!-- 路由插座即占位组件 匹配到的路由组件将会显示在这个地方 --><router-outlet></router-outlet>0

将用户路由模块关联到主路由模块

<!-- 路由插座即占位组件 匹配到的路由组件将会显示在这个地方 --><router-outlet></router-outlet>1

在导航组件中添加访问链接

<!-- 路由插座即占位组件 匹配到的路由组件将会显示在这个地方 --><router-outlet></router-outlet>2

路由守卫会告诉路由是否允许导航到请求的路由。

路由守方法可以返回 boolean 或 Observable \<boolean\> 或 Promise \<boolean\>，它们在将来的某个时间点解析为布尔值

1、CanActivate

检查用户是否可以访问某一个路由。

CanActivate 为接口，路由守卫类要实现该接口，该接口规定类中需要有 canActivate 方法，方法决定是否允许访问目标路由。

路由可以应用多个守卫，所有守卫方法都允许，路由才被允许访问，有一个守卫方法不允许，则路由不允许被访问。

创建路由守卫：ng g guard guards/auth

<!-- 路由插座即占位组件 匹配到的路由组件将会显示在这个地方 --><router-outlet></router-outlet>3

<!-- 路由插座即占位组件 匹配到的路由组件将会显示在这个地方 --><router-outlet></router-outlet>4

2、CanActivateChild

检查用户是否方可访问某个子路由。

创建路由守卫：ng g guard guards/admin

注意：选择 CanActivateChild，需要将箭头移动到这个选项并且敲击空格确认选择

<!-- 路由插座即占位组件 匹配到的路由组件将会显示在这个地方 --><router-outlet></router-outlet>5

<!-- 路由插座即占位组件 匹配到的路由组件将会显示在这个地方 --><router-outlet></router-outlet>6

3、CanDeactivate

检查用户是否可以退出路由。比如用户在表单中输入的内容没有保存，用户又要离开路由，此时可以调用该守卫提示用户

<!-- 路由插座即占位组件 匹配到的路由组件将会显示在这个地方 --><router-outlet></router-outlet>7

<!-- 路由插座即占位组件 匹配到的路由组件将会显示在这个地方 --><router-outlet></router-outlet>8

<!-- 路由插座即占位组件 匹配到的路由组件将会显示在这个地方 --><router-outlet></router-outlet>9

4、Resolve

允许在进入路由之前先获取数据，待数据获取完成之后再进入路由

<a routerLink="/home">首页</a><a routerLink="/about">关于我们</a>0

<a routerLink="/home">首页</a><a routerLink="/about">关于我们</a>1

<a routerLink="/home">首页</a><a routerLink="/about">关于我们</a>2

<a routerLink="/home">首页</a><a routerLink="/about">关于我们</a>3

更多编程相关知识，请访问：编程视频！！

以上就是深入了解Angular中的路由，如何快速上手？的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~