angular/routing_guide

Angular Routing Guide 简介

Angular 的路由系统是构建单页面应用程序（SPA）的关键组成部分。它允许你根据不同的URL路径动态加载不同的组件，提供流畅的用户体验。

基本概念

• 路由：定义了当用户访问特定URL时，应用应该显示哪个组件。
• 路由器：Angular内置的服务，负责解析URL并激活相应的路由。
• 组件：Angular的基本构建块，用于构建用户界面。

路由配置

要使用Angular路由，你需要在模块中导入RouterModule，并在模块的forRoot()方法中配置路由。

import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot(routes)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

动态路由

Angular支持动态路由，允许你为路由参数定义占位符。

const routes: Routes = [
  { path: 'user/:id', component: UserComponent }
];

在这个例子中，/user/:id 路径将匹配任何以 /user/ 开头并跟随一个ID的URL。

路由守卫

路由守卫可以用来保护路由，确保只有满足特定条件的用户才能访问。

export class AuthGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot): boolean {
    // 检查用户是否已登录
    return isLoggedIn();
  }
}

图片

Angular Logo

更多关于Angular的信息，请访问我们的Angular官方文档。

如果你对Angular路由有更多疑问，可以查看我们的Angular路由进阶教程。