スポンサーリンク

AngularのRouteのパスの優先順位について

AngularのRouteのパスの優先順位は、Routeの設定を上から順に確認して、最初に一致したものが優先されます。その場合、後続のRouteの設定までは見ません。

優先順位について検証

間違った設定

例えば、1番目にワイルドカードのパスを設定してしまうと、どんなURLを入力しても1番目のパス設定で完結され、後続のパス設定は使わなくなります。

export const routes: Routes = [
  { path: '**', component: SecondComponent }, // 全てのパス
  { path: 'first', component: FirstComponent },
];

正しい設定

以下のように設定すれば、1番目のパス設定に該当しなかったとき、他のすべてのパスはワイルドカードで設定したものが使われるようになります。

export const routes: Routes = [
    { path: 'first', component: FirstComponent },
    { path: '**', component: SecondComponent }, // 全てのパス
];

まとめ

この動きから、細かいURL設定は先頭の方に書き、範囲が広いURL設定は後方に書くようにコーディングすべきです。