Angular 98 中的路由和嵌套路由是什么

在 Angular 中，路由是一种用于从一个视图导航到另一个视图的机制。使用路由，您可以定义 URL 和视图之间的映射，并使用户可以通过点击链接在视图之间导航。

路由基础知识

在 Angular 中，路由配置是通过创建一个路由模块来定义的。以下是一个简单的路由模块示例：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

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

在上面的例子中，我们定义了两个路由：'/' 和 '/about'。每个路由都由一个 path 和一个 component 组成，这表示当 URL 匹配该路由的 path 时，将显示该 component。

您还可以定义路由参数，如下所示：

{ path: 'user/:id', component: UserComponent }

在上面的例子中，我们定义了一个名为 'id' 的路由参数。我们可以通过在 URL 中使用 '/user/1' 的形式来指定路由参数值。

嵌套路由

嵌套路由是一种在父路由下创建子路由的方式。该方法可用于构建层次化的视图和更细粒度的路由管理。

下面是一个简单的嵌套路由示例：

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'user/:id', component: UserComponent, children: [
    { path: '', component: ProfileComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'comments', component: CommentsComponent }
  ]}
];

在上面的例子中，我们通过在 UserComponent 路由下创建了三个子路由：'/'、'/contact' 和 '/comments'。这意味着当路径为 '/user/1' 时，将首先加载 UserComponent，然后根据子路由的 path 值加载适当的组件。

总结

路由是 Angular 中一个非常重要的概念。通过路由，您可以使用户能够通过点击链接在视图之间导航。嵌套路由可以帮助您构建更复杂的视图，并对路由进行更细粒度的管理。