AngularルーティングハッシュパターンとHTML5パターン

クズども · 掲載地 2020/05/28 16:35:03

ルーティングの2つの戦略

PathLocationStrategy - デフォルトのポリシーで、「HTML 5 pushState」スタイルをサポートします。
HashLocationStrategy - 「ハッシュURL」スタイルをサポートしています。

どちらの戦略が良いのでしょうか?

戦略を選び、プロジェクトの早い段階で実行しなければなりません。一度アプリが本格稼働に入ると、すでに多くのURLへの参照があるため変更は簡単ではありません。

ほとんどのAngularプロジェクトはデフォルトのHTML5スタイルを使用しています。生成されるURLはユーザーが理解しやすくなり、将来的にはサーバー側でのレンダリングにも余地が残っています。

サーバー側で特定のページをレンダリングすることは、アプリが最初に読み込まれたときの応答性を大幅に向上させる技術です。通常なら10秒以上かかるアプリも、サーバー側で事前にレンダリングされ、ユーザーのデバイス上で1秒未満でレンダリングできます。

このオプションは、アプリのURLが標準的なウェブURLで、中間にハッシュ(#)がない場合にのみ機能します。

ハッシュルーティングを使う強い理由がない限り、デフォルトのHTML5ルーティングスタイルを守るべきです。

angular-cliはデフォルトでHTML5ヒストリーモードを使用します。

URLのような http://localhost:4200/task-list、

URLの方が快適で美しく見えます。ルーティングページでリフレッシュすると404が表示されます

また、ハッシュパターンというパターンも存在します。

URLのような http://localhost:4200/#/task-list、

ルートページにジャンプしてリフレッシュしても、現在のルートのままです。

ハッシュルーティングモード方式を有効にしてください

app.module.ts導入と提供者

ログインが見えます。

[角] AngularルーティングハッシュパターンとHTML5パターン

関連記事

閲覧したセクション