[Angular] 笔记 18：Angular Router-CSDN博客

本文链接：https://blog.csdn.net/ftell/article/details/135297025

本文介绍了Angular框架的路由功能，包括如何在Angular项目中集成Router，创建和注册路由，生成组件，设置`<router-outlet>`和`<routerLink>`,以及在Navbar中实现动态链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

chatgpt：
Angular 具有内置的大量工具、功能和库，功能强大且经过良好设计，如组件化架构、依赖注入、模块化系统、路由和HTTP客户端等。这些功能可以直接用于项目中，无需额外的设置或第三方库。这简化了开发流程，因为不必从头编写或集成许多常见的功能，而是可以利用Angular提供的工具快速启动和构建应用程序。

也就是说，Angular 是一种自带电池(Batteries Included)的框架，web 开发所需要的一切应用尽有，Router 是其中之一。

当创建Angular app时，使用命令 ng new <app-name>， Angular 接着会问要不要 Routing 功能 ? 选择 yes, 生成的 app 就会带有 routing 模块：

在这里插入图片描述

1. 注册 routes

app-routing.module.ts:

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

// 这里注册两个 route：homepage route 和 通配符 route
const routes: Routes = [
  {
    path: '', component: HomeComponent, pathMatch: 'full' },
  {
    path: '**', component: NotfoundComponent },
];

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