web-dev-qa-db-ja.com

WebアプリでのPathLocationStrategyとHashLocationStrategy

使用の長所と短所は何ですか？

  1. PathLocationStrategy-デフォルトの「HTML 5 pushState」スタイル。
  2. HashLocationStrategy-「ハッシュURL」スタイル。

たとえば、HashLocationStrategyを使用すると、＃IDによって要素にスクロールする機能が妨げられますが、一部のサードパーティプラグインではHashLocationStrategyまたはHashbang＃！ ajax Webサイトで機能するため。

どれがwebappにより多くを提供するのか知りたいのですが。

urlweb-applicationsangularhashbangangular2-routing
15
Murhaf Sousli

私にとっての主な違いは、PathLocationStrategyは、Angular2アプリケーションのメインHTMLページにリダイレクトされる@RouteConfigで構成されたすべてのパスへのサーバー側の構成を必要とすることです。そうしないと、ブラウザーでアプリケーションをリロードしようとしたり、特定のURLを使用してアクセスしようとしたりすると、404エラーが発生します。

これについていくつかのヒントを与えることができる質問はここにあります：

それがあなたを助けることを願っています、ティエリー

4
Thierry Templier

#はクライアントでのみ処理でき、サーバーはそれらを無視します。これは検索エンジン（SEO）で問題を引き起こす可能性があり、リダイレクトは冗長なページのリロードを引き起こす可能性があります。このページ https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling にはいくつかの詳細な説明がありますが、一部の引数はAngularアプリケーション（たとえば、JSが無効になっていると動作しません）。

HTML5 pushstateの「欠点」は、Thierryによって説明されているようなサーバーサポートが必要なことです。

9
Günter Zöchbauer

公式 docs によると：

ルーターが新しいコンポーネントビューに移動すると、ブラウザーの場所と履歴がそのビューのURLで更新されます。これは完全にローカルなURLです。ブラウザーはすべきではないこのURLをサーバーに送信し、reloadはページに送信しないでください。

PathLocationStrategy

最新のHTML5ブラウザーは_history.pushState_をサポートしています。これは、サーバーのページ要求をトリガーすることなくブラウザーの場所と履歴を変更する手法です。ルーターは、ページの読み込みを必要とするURLと区別できない「自然な」URLを作成できます。

xyzコンポーネントにルーティングするHTML5 pushStateスタイルのURLは次のとおりです：_localhost:4200/xyz/_

HashLocationStrategy

古いブラウザーは、_#_（hashと呼ばれる）の後に変更が発生しない限り、ロケーションURLが変更されるとサーバーにページ要求を送信します。ルーターは、アプリケーション内のルートURLをハッシュで構成することにより、この例外を利用できます。

xyzコンポーネントにルーティングするhashスタイルのURLは次のとおりです：_localhost:4200/src/#/xyz/_

どれがwebappにより多くを提供するのか知りたいのですが。

ほとんどすべてのAngularプロジェクトは、デフォルトのHTML5スタイルを次のように使用する必要があります。

  1. ユーザーが理解しやすいURLを生成します。
  2. 後でサーバー側レンダリングを実行するオプションが保持されます。

サーバー上で重要なページをレンダリングすることは、アプリが最初にロードされたときに知覚される応答性を大幅に改善できる手法です。起動に10秒以上かかるアプリは、サーバーにレンダリングされ、1秒未満でユーザーのデバイスに配信されます。

このオプションは、アプリケーションURLがハッシュ（＃）が中央にない通常のWeb URLのように見える場合にのみ使用できます。

ハッシュルートに頼るやむを得ない理由がない限り、デフォルトのままにします。

2
patrick.1729