广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

本篇文章带大家了解一下angular中的路由模块，介绍一下匹配规则、路由传参、路由嵌套、命名插座、导航路由、路由懒加载等相关知识，希望对大家有所帮助！

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

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

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

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

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

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

2、创建路由规则

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

3、引入路由模块并启动

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

4、添加路由插座

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

5、在导航组件中定义链接

<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: "about",    component: AboutComponent  },  {    path: "**",    component: NotFoundComponent  }]

1、查询参数

<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

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

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

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

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

4、配置用户模块的路由规则

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

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

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

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

<!-- 路由插座即占位组件 匹配到的路由组件将会显示在这个地方 --><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

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

ng g resolver <name>

<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

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

以上就是angular学习之路由模块浅析的详细内容，更多请关注9543建站博客其它相关文章！