vue の 2 つのルーティング モードとその実装原理

Vue.js は、優れたルーティング管理モジュールを通じてシングルページ アプリケーション (SPA) の開発を可能にする人気のフロントエンド フレームワークです。 Vue ルーティング管理モジュール (Vue Router) には、ヒストリー モードとハッシュ モードの 2 つのモードがあります。この記事では、これら 2 つのパターンの実装方法と Vue での使用方法について詳しく説明します。

1. ルーティング モードの概念

従来のマルチページ アプリケーション開発では、各ページに独自の URL アドレスがあり、ユーザーは異なる URL アドレスにアクセスするときに異なるページを要求します。シングルページアプリケーションでは、すべてのページが同じ HTML ページ内に表示され、ユーザーのジャンプによってページがリロードされることはなく、JavaScript によってページが切り替わります。ページ切り替えのプロセスでは、Vue ルーティング管理モジュールが重要な役割を果たします。

ルーティング モードは、送信中に URL アドレスによって使用される方式を指します。その違いに応じて、ルーティング モードは、ハッシュベース ルーティング モードとヒストリーベース ルーティング モードの 2 種類に分けることができます。

2. ハッシュ モード

ハッシュ モードは Vue Router のデフォルトのルーティング モードであり、その実装原理は非常にシンプルです。ハッシュは URL 内の # 記号を指します。これはよく目にするアンカー ポイントです。

ハッシュ モードでは、URL の # 記号の後に http://www.example.com/#/home のようにページのパスが続きます。ここで、/#/home はパスです。ページ。ユーザーがページにジャンプすると、Vue Router は URL のハッシュ部分を変更することで新しいページのパスを表示し、ページのリロードをトリガーするのではなく、ルーティングの切り替えを介して新しいページをレンダリングします。

ハッシュ モードを使用する利点は、ハッシュ部分がサーバーに送信されず、フロントエンドで切り替えられるため、URL の重複を回避できることです。ただし、検索エンジンの SEO に影響を与えたり、URL に異常が発生したりするなどの副作用も伴います。

3. 履歴モード

履歴モードでは、window.history.pushState API、window.history.replaceState API、popstate イベントを使用する HTML5 の API を使用します。このモードでは、Vue Router が現在のページの URL を履歴スタックに追加し、スタックを操作することでルート切り替えを実装します。ユーザーがブラウザの戻るボタンをクリックすると、Vue Router はイベント リスニング メカニズムを通じて Popstate イベントをリッスンし、前の URL アドレスに戻ります。以下はサンプル コードです:

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

ここで、ヒストリカル モードの使用を選択した場合は、サーバー構成を適切に設定する必要があることに注意してください。このモードでは、アクセスされた URL がサーバー上の静的リソースへのパスではない場合、404 エラーが返されるためです。

4. ルーティング モードの切り替え

Vue Router を使用してシングルページ アプリケーションを開発する場合、次の 2 つの方法でルーティング モードを切り替えることができます:

1. 設定ルーティング モジュールの mode 属性サンプル コードは次のとおりです:

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

2. プロジェクトのビルド時に vue.config.js ファイルに HistoryApiFallback 属性を設定することで実装されます。以下にサンプルコードを示します。

module.exports = {
  devServer: {
    historyApiFallback: true
  }
}

なお、ルーティングモードを設定する際には、ルーティング機能が正常に動作することをサーバ環境でテスト、検証する必要があります。

5. 概要

Vue Router は Vue.js の重要な部分であり、シングルページ アプリケーションのフロントエンド ルーティング管理を実現できます。 URL アドレスが送信プロセスで使用する方式に応じて、ハッシュ モードとヒストリカル モードに分けられ、それぞれに長所と短所があり、開発者は実際のニーズに応じて選択する必要があります。シングルページ アプリケーション開発に Vue Router を使用する場合は、ルーティング モードを適切に設定し、サーバー環境でテストおよび検証して、ルーティング機能が正常に実行できることを確認する必要があります。

以上がvue の 2 つのルーティング モードとその実装原理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。