18. ルーティング — URLで画面を切り替える

ルーティングは、URLに応じて表示するコンポーネントを切り替える仕組みです。Routes型の配列に { path: 'about', component: AboutComponent } のようにURLとコンポーネントの対応を定義し、アプリ起動時に provideRouter(routes) で登録します。コンポーネントが表示される場所は <router-outlet /> で指定します。

実務のアプリは「一覧ページ」「詳細ページ」「設定ページ」のように複数の画面を持つのが普通で、ルーティングはその土台になります。URLで画面が決まるため、特定のページをブックマークしたり、リンクとして共有したりできるのが大きな利点です。

ページ遷移のリンクは <a href> ではなく <a routerLink> で書きます。hrefを使うとブラウザがページ全体を再読み込みしてしまい、シングルページアプリの良さが失われるので注意しましょう。

サンプルコード(フレームワーク環境が必要なため表示のみ)

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

// URLとコンポーネントの対応表を定義する
export const routes: Routes = [
  { path: '', component: HomeComponent }, // トップページ
  { path: 'about', component: AboutComponent },
];

// main.ts で provideRouter(routes) を渡して有効化する:
// bootstrapApplication(AppComponent, {
//   providers: [provideRouter(routes)],
// });

// 表示先には <router-outlet /> を、リンクには routerLink を使う:
// <a routerLink="/about">About へ</a>

公式ドキュメントで詳しく ↗