Vue におけるハッシュ ルーティングとヒストリ ルーティングの違いの簡単な分析

Vue や React などのフロントエンド レンダリングを使用する場合、通常、ハッシュ ルーティングとヒストリー ルーティングの 2 つのルーティング方法があります。では、これら 2 つのルーティング方法の違いは何でしょうか?以下に紹介させていただきますので、ご参考になれば幸いです！

ハッシュ ルーティングとヒストリ ルーティングの 2 つのモードの違いを次の側面から整理してみましょう:

1. 外観

hash: アドレス バーの URL の # 記号。たとえば、次の URL: http://www.abc.com/#/hello、hash の値は #/hello です。その特徴は、ハッシュは URL に表示されますが、HTTP リクエストには含まれず、バックエンドにはまったく影響を与えないため、ハッシュを変更してもページはリロードされません。 [関連する推奨事項: "vue.js チュートリアル "]

history: アドレス バーに # がありません。たとえば、この URL: http://www.abc.com/hello はより美しく、通常の URL であり、プロモーションに適しています。

2. Function

history: アプリを開発する際に共有ページがありますが、この共有ページはvueやreactで作成したものなので、このページをShare toに置きましょう。サードパーティ製アプリ。一部のアプリでは、URL に # 番号を含めることが許可されていません。したがって、# 番号を削除する場合は、履歴モードを使用する必要があります。このモデルのもう 1 つの問題は、セカンダリ ページにアクセスして更新操作を行うと 404 エラーが表示されることです。その場合は、バックエンド担当者と協力して、Apache または nginx の URL リダイレクトを設定してもらう必要があります。ホームページのルートで問題ありません。

3. 更新するには入力してください

• #hash: URL には表示されますが、HTTP リクエストには含まれません。バックエンド まったく効果がないため、ハッシュを変更してもページはリロードされません;

• history: 新しい pushState() を利用する## HTML5 履歴インターフェイスの ## および replaceState() メソッド。

  これら 2 つのメソッドは、現在存在する

  back()、forward()、go() 内のブラウザーの履歴スタックに適用されます。これら 2 つのメソッドは、メソッドに基づいて、履歴レコードを変更する機能を提供します。これら 2 つのメソッドを使用して変更を実行する場合、 は現在のアドレス バーの URL を変更することしかできませんが、ブラウザーはバックエンドにリクエストを送信せず、popstate イベントの実行をトリガーしません。通常、404 はこのとき、バックエンド担当者と協力してリダイレクトの設定を行う必要があります。

4. 使用シナリオ

通常の状況では、ハッシュと履歴の両方が受け入れられます。美容愛好家であれば、

# URLに記号が混じっているのはちょっと不快です。

醜いハッシュを望まない場合は、ルーティング履歴モードを使用できます。これは、history.pushState API を最大限に活用して、ページをリロードせずに URL ジャンプを完了します。ハッシュを直接変更する場合と比較して、history.pushState() を呼び出すことには次の利点があります。

1. pushState() 新しい URL セットは、次の URL セットと同じオリジンのものにすることができます。現在の URL。任意の URL; およびハッシュは # 以降の部分のみを変更できるため、現在の URL と同じドキュメントの URL のみを設定できます。

2. pushState( ) 新しい URL セット 現在の URL とまったく同じにすることができ、スタックにレコードも追加されます。また、ハッシュによって設定された新しい値は、追加アクションをトリガーするために元のものとは異なる必要があります。レコードをスタックに追加;

3. ushState() stateObject パラメーターを使用して任意のタイプのデータをレコードに追加できますが、ハッシュでは短い文字列のみを追加できます pushState() title 属性は、後で使用するために追加で設定できます。

5. 概要

従来のルーティングでは、ユーザーが URL にアクセスすると、対応するサーバーがリクエストを受信し、URL 内のパスを解析して対応するサーバーを実行します。これにより、ルート配布が完了します。

フロントエンド ルーティングにはサーバーは関与しません。ハッシュまたは HTML5 履歴 API を使用してフロントエンドによって実装されます。通常、さまざまなコンテンツの表示と切り替えに使用されます。

プログラミング関連の知識について詳しくは、

プログラミング ビデオをご覧ください。 ！

以上がVue におけるハッシュ ルーティングとヒストリ ルーティングの違いの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。