Angular路由管理怎样做

来源：佚名编辑：佚名

2024-06-17 14:21:37

在Angular中，路由管理是通过Angular Router模块来实现的。以下是一些常用的路由管理方法：

在app.module.ts文件中引入RouterModule模块，并在imports数组中配置路由：

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

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

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

在需要使用路由的组件中，使用RouterLink指令来配置路由链接：

<nav>
  <a routerLink="/home">Home</a>
  <a routerLink="/about">About</a>
</nav>

在组件中使用Router服务来进行路由导航：

import { Router } from '@angular/router';

export class MyComponent {
  constructor(private router: Router) {}

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

使用ActivatedRoute服务来获取当前路由的信息：

import { ActivatedRoute } from '@angular/router';

export class MyComponent {
  constructor(private route: ActivatedRoute) {
    this.route.params.subscribe(params => {
      console.log(params);
    });
  }
}