Vue におけるハッシュとヒストリーの原則と違い

Vue のルーティング モードの違い: ハッシュ: URL フラグメントを使用して状態を管理し、HTTP リクエストを送信せず、SEO に優しくなく、ナビゲーションが高速になり、クロスドメインを許可します。履歴: ブラウザ履歴 API を使用して状態を管理し、HTTP リクエストを送信し、SEO に配慮し、ブラウザ履歴を更新し、クロスドメインを制限します。

Vue におけるハッシュと履歴の原則と違い

Vue.js シングル ページ アプリケーション (SPA) では、ルーティングを使用して、アプリケーション内のページ ナビゲーションと状態を管理します。 hash と history という 2 つの主要なルーティング モードがあります。

原則

ハッシュ:

• URLフラグメント(#)を使用してナビゲーションステータスを管理します。
• 実際の HTTP リクエストをサーバーに送信しませんが、JavaScript 経由で URL の変更をリッスンします。

履歴:

• ブラウザ履歴 API を使用してナビゲーション状態を管理します。
• は実際の HTTP リクエストをサーバーに送信し、ブラウザのアドレス バーを変更します。

相違点

1. URLの外観

• ハッシュ: URLには、ナビゲーションステータスが続くハッシュ(#)記号が含まれます。例: https://example.com/#/homehttps://example.com/#/home
• History: URL 类似于传统网站的 URL，不包含 hash。例如: https://example.com/home
履歴: URL は従来の Web サイトの URL に似ており、ハッシュは含まれません。例: https://example.com/home

2. ブラウザ履歴

• ハッシュ: ブラウザ履歴は変更されません。
• 履歴: 通常の Web サイト内を移動するのと同じように、ブラウザーの履歴が更新されます。

3. SEO への影響

• ハッシュ: ハッシュは HTTP リクエストに含まれていないため、検索エンジンがハッシュ部分をクロールできないため、SEO には適していません。
• 歴史: URL の変更は HTTP リクエストを介して実装されるため、SEO に優しく、検索エンジンがページをクロールしてインデックスを付けることができます。

4. パフォーマンス

• ハッシュ: HTTP リクエストをサーバーに送信する必要がないため、ナビゲーションが高速になります。
• 履歴: HTTP リクエストをサーバーに送信する必要があるため、ナビゲーションが遅くなります。

5. クロスドメインの制限

• ハッシュ: JavaScript を使用して URL の変更をリッスンするため、クロスドメイン ナビゲーションが許可されます。
• 履歴: HTTP リクエストが送信され、ブラウザーがクロスドメイン リクエストをブロックするため、クロスドメイン ナビゲーションは許可されません。

ユースケース

• ハッシュ:
HTML5 履歴 API をサポートしていない古いブラウザー、またはクロスドメイン ナビゲーションを必要とするアプリケーションで一般的に使用されます。
• 履歴:
SEO に配慮したり、ブラウザ履歴を維持したり、アドレス バーを更新したりする必要があるアプリケーションでよく使用されます。

🎜

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