Vueの履歴とハッシュの違いは何ですか

違い: 1. ハッシュ ルートにはアドレス バーの URL に「#」が表示されますが、履歴ルートには表示されません; 2. Enter キーを押して更新操作を実行すると、ハッシュ ルートがアドレス バーに対応するページ、一方履歴ルート 一般に 404 エラーが発生します; 3. ハッシュは一部の下位バージョンのブラウザをサポートしていますが、履歴はサポートしていません。

この記事の動作環境: Windows 10 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。

vue の履歴とハッシュの違いは何ですか

• 1. ハッシュ ルートはアドレス バーの URL に # があり、window.location.hash で読み取られます。履歴ルートの見栄えは良くありません。

• #2. Enter キーを押して更新操作を実行すると、ハッシュ ルートがアドレス バーに対応するページに読み込まれますが、履歴ルートは通常、404 エラーが報告されます (更新はネットワーク要求であり、バックエンドの準備がない場合はエラーが報告されます)。

• 3. ハッシュ ルーティングは下位バージョンのブラウザをサポートしますが、履歴ルーティングは HTML5 の新しい API です。

• 4.hash の特徴は、URL には表示されますが、http リクエストには含まれないため、バックエンドには影響を与えず、ハッシュを変更しても問題はありません。ページを再ロードするため、これは単一ページのアプリケーションでも必須です。

• 5.history はブラウザの履歴スタックを使用します。以前は back、forward、go メソッドがありました。その後、pushState() メソッドと replaceState() メソッドが HTML5 に追加されました。履歴レコードを変更する機能 ただし、変更する場合、現在の URL は変更されますが、ブラウザーはすぐにバックエンドにリクエストを送信しません。

• 6. このモードの履歴には、バックグラウンド構成のサポートが必要です。たとえば、プロジェクトのホームページにアクセスすると、すべて正常にアクセスできますが、ページを更新したり、パスに直接アクセスすると、404 が返されます。これは、ヒストリー モードでは window.history のみが存在するためです。 js を介して動的に操作されます。ブラウザのアドレス バーでパスを変更するには、http リクエストは開始されませんが、このアドレスをブラウザに直接入力すると、サーバーへの http リクエストを開始する必要がありますが、このターゲットは404

概要

もちろん、履歴がすべてに役立つわけではありません。 SPA はブラウザで簡単に使用できますが、この 2 つの違いは、URL を介してバックエンドへの HTTP リクエストを開始する必要がある場合に発生します。特に、ユーザーが URL を手動で入力して Enter キーを押した場合、またはブラウザを更新 (再起動) した場合に発生します。

1: ハッシュ モードでは、ハッシュ シンボルの前のコンテンツ (http://www.abc.com など) のみがリクエストに含まれるため、ルーティングが実装されていない場合でもバックエンドに対しては含まれます。完全にカバーされており、404 エラーは返されません。

2: 履歴モードでは、フロントエンドの URL は、実際にバックエンドへのリクエストを開始する URL と一致している必要があります。 http://www.abc.com/book/id など。バックエンドに /book/id のルーティング処理がない場合、404 エラーが返されます。

問題の解決策:

404 エラーの解決策: オンラインで紹介されている多くの方法は機能しません。 URL 書き換えモジュールをインストールし、書き換えルールを構成して、index.html を指定するか、URL 書き換えによって生成された web.config ファイルを Web サイトのルート ディレクトリに直接配置します。

【関連する推奨事項:「vue.js チュートリアル 」】

以上がVueの履歴とハッシュの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。