如何在 Angular 中设置默认路由

在 Angular 中，可以通过设置默认路由来指定应用程序加载时显示的初始页面。下面是在 Angular 10 中设置默认路由的步骤：

1. 在项目的根目录中打开 app-routing.module.ts 文件（如果该文件不存在，则需要手动创建），该文件用于配置应用程序的路由。

2. 在 app-routing.module.ts 文件中，导入 RouterModule 和 Routes 模块：

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

3. 定义应用程序的路由配置。每个路由都需要指定一个路径和对应的组件。例如：

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

4. 添加一个额外的路由，将其路径设置为空字符串，并将其重定向到默认路由。可以使用 redirectTo 属性来实现重定向。例如：

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

   在上面的例子中，如果用户访问根目录（空路径），将自动重定向到 /home 路径。

5. 在 @NgModule 的 imports 数组中注册路由配置。例如：

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

   RouterModule.forRoot(routes) 方法将路由配置注册到应用程序中。

6. 在 AppModule 中导入和添加 AppRoutingModule 到 imports 数组中：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { AppRoutingModule } from './app-routing.module';
   
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [BrowserModule, AppRoutingModule],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

   这样，你就完成了默认路由的设置。

现在，当用户访问应用程序时，将自动导航到指定的默认路由。

希望以上内容能帮助你在 Angular 中设置默认路由。