• 路由 - 主路由的寫法

路由的幾種型態 - 主路由


  • 主路由

  • 子路由

  • 延遲子路由

  • 輔助路由


可直接在 AppModule 直接寫

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
const routes: Routes = [
  {
    path: "",
    redirectTo: "home",
    pathMatch: "full"
  },
  {
    path: "home",
    component: HomeComponent
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ]
})
export class AppModule { }

可拆到 AppRouteModule ,並在 AppModule 註冊

AppRoutingModule

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
const routes: Routes = [
  {
    path: "",
    redirectTo: "home",
    pathMatch: "full"
  },
  {
    path: "home",
    component: HomeComponent
  }
];

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

AppModule

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }