簡介

Angular 特色：SPA 單頁面應用程式（Single Page Applications），意思為整個專案中實際上只有一個頁面。
所以其實是透過顯示、隱藏與特定元件相對應的部分，來展示給使用者內容。

官方文件：Angular 路由

基本的路由設定

現在專案有：FirstComponent、SecondComponent

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; // CLI imports AppRoutingModule
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule // +到這邊
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app-routing.module.ts
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// 設定路由component
const routes: Routes = [
  { path: 'first', component: FirstComponent },
  { path: 'second', component: SecondComponent },
];
// configures NgModule imports and exports
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

<!-- XXX.component.html -->
<ul>
  <li><a routerLink="/first" routerLinkActive="active" ariaCurrentWhenActive="page">First Component</a></li>
  <li><a routerLink="/second" routerLinkActive="active" ariaCurrentWhenActive="page">Second Component</a></li>
</ul>

（模擬）結果：

• First Component
• Second Component

設定萬用字元路由

當使用者導航至不存在的頁面時，正常可利用萬用字元來讓使用者去適當的地方。
實務上可以導航至404頁面、或是登入頁面。

// app-routing.module.ts
// 404頁面
const routes: Routes = [
  { path: 'first', compoent: FirstComponent },
  { path: 'second', component: SecondComponent },
  { path: '**', component: Page404Component }
];

// app-routing.module.ts
// 登入頁面
const routes: Routes = [
  { path: 'first', compoent: FirstComponent },
  { path: 'second', component: SecondComponent },
  { path: 'login', component: LoginComponent },
  { path: '**', redirectTo: 'login' },
];

路由順序很重要，最好是 具體路由 ~ 不具體路由。
像我可能會把 path: '' 放置第一個，而 path: '**' 放置於最後。

設定路由配置屬性:pathMatch

專門用來匹配空白(empty)、通用符號(wildcard segments) 的路由路徑。
pathMatch 有兩個值可以設定：「prefix」和「full」。

1. prefix: 預設值。請求的 URL 以指定的路徑段開頭、Angular.js 將匹配配置的路由。
2. full: 使用此值時，Angular.js 要求請求的 URL 與配置的路由路徑之間完全相符。

範例：

我們輸入網址：/products/123

// app-routing.module.ts
const routes: Routes = [
  { path: 'products', component: ProductsComponent },     // 連到這裡
  { path: 'products/:id', component: ProductsComponent },
];

// app-routing.module.ts
const routes: Routes = [
  { path: 'products', component: ProductsComponent },
  { path: 'products/:id', component: ProductsComponent, pathMatch: 'full' }, // 連到這裡
];

使用 pathMatch: 'full' 有點像是有優先路權。

包成子路由分類

如果是大型專案的話會有很多頁面，可以利用 loadChildren 來管理。
目標想做成：
| A0 |->| first || second |
| A1 |

// app-routing.module.ts
const routes: Routes = [
  { path: 'A0', loadChildren: () => import("src/app/pages/a0/a0.module").then((m) => m.A0Module) },
  { path: 'A1', component: A1Component },
];

// a0.module.ts
@NgModule({
  declarations: [
    FirstComponent,
		SecondComponent
  ],
  imports: [
    A0RoutingModule
  ],
})
export class A0Module { }

// a0-routing.module.ts
const routes: Routes = [
  {
    path: '',
    component: A0Component,
    children: [
      { path: 'first-component', compoent: FirstComponent },
      { path: 'second-component', component: SecondComponent },
    ],
  },
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class A0RoutingModule { }

參考來源

Demystifying Angular.js pathMatch Strategy: Best Practices and Pitfalls to Avoid