Vue のハッシュ ルーティングとヒストリ ルーティングの違い

Vue.js では、ハッシュ ルーティングはルーティング ステータスを表すために URL フラグメントを使用します。これは古いブラウザと互換性がありますが、SEO には良くありません。履歴ルーティングはルーティング ステータスを表すために URL パスを使用します。これは最新のブラウザとのみ互換性があります。ブラウザーに適しており、SEO に適しています。アプリケーションの要件と SEO のニーズに応じて、どのモードを選択します。

Vue.js におけるハッシュ ルーティングとヒストリー ルーティングの違い

Vue.js には 2 つのルーティング モードがあります。 ハッシュルーティングと履歴ルーティング。これらには、URL の処理、ブラウザの互換性、SEO において重要な違いがあります。

URL 処理

• #ハッシュ ルーティング: URL フラグメント (#) を使用して、# などのルーティング ステータスを表します。マイページ。
• 履歴ルーティング: 実際の URL パスを使用して、ルーティング ステータスを表します (/my-page など)。

ブラウザの互換性

• ハッシュ ルーティング: すべての最新のブラウザと互換性があります。古い HTML5 History API のサポートはありません。ブラウザ。
• 履歴ルーティング: Chrome、Firefox、Safari、Edge など、HTML5 History API をサポートする最新のブラウザとのみ互換性があります。

SEO (検索エンジン最適化)

• ハッシュ ルーティング: ブラウザ履歴に新しいエントリが作成されず、役に立ちませんSEOに。
• 履歴ルーティング: 新しいブラウザ履歴エントリを作成します。これは、検索エンジンがさまざまなルーティング状態をクロールしてインデックスを作成できるため、SEO に役立ちます。

その他の違い

• 戻るボタン: ハッシュ ルーティングを使用する場合、戻るボタンは popstate# をトリガーします。 ## イベント; History ルートを使用すると、popstate および hashchange イベントがトリガーされます。
• ページの更新: ハッシュ ルーティングを使用する場合、ページを更新してもルーティングの更新はトリガーされません。履歴ルーティングを使用する場合、ページを更新するとルーティングの更新がトリガーされます。
• パフォーマンス: ヒストリー ルーティングは URL を変更する必要がないため、通常、ハッシュ ルーティングよりもパフォーマンスが優れています。

どのルーティング モードを選択するか

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