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 サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











この記事では、functionコンポーネントでのデータフェッチやDOM操作などの副作用を管理するためのフックであるReactの使用Effectについて説明します。メモリリークなどの問題を防ぐための使用、一般的な副作用、およびクリーンアップについて説明します。

怠zyな読み込みは、必要になるまでコンテンツの読み込みを遅延させ、初期負荷時間とサーバーの負荷を削減することにより、Webパフォーマンスとユーザーエクスペリエンスを改善します。

JavaScriptの高次関数は、抽象化、共通パターン、および最適化技術を通じて、コードの簡潔さ、再利用性、モジュール性、およびパフォーマンスを強化します。

この記事では、JavaScriptのカレーについて説明します。これは、マルチアーグメント関数を単一argument関数シーケンスに変換する手法です。 Curryingの実装、部分的なアプリケーションなどの利点、実用的な用途、コード読み取りの強化を調査します

この記事では、Virtual DOMツリーを比較してDOMを効率的に更新するReactの調整アルゴリズムについて説明します。パフォーマンスの利点、最適化技術、ユーザーエクスペリエンスへの影響について説明します。

記事では、PreventDefault()メソッドを使用して、イベントハンドラーのデフォルト動作の防止、ユーザーエクスペリエンスの強化などの利点、およびアクセシビリティの懸念などの潜在的な問題について説明します。

この記事では、ReactのUseContextを説明しています。これにより、小道具掘削を避けることで国家管理を簡素化します。再レンダーの削減により、集中状態やパフォーマンスの改善などの利点について説明します。

この記事では、予測可能性、パフォーマンス、ユースケースなどの側面に焦点を当てた、Reactの制御されていないコンポーネントと制御されていないコンポーネントの利点と欠点について説明します。それらを選択する際に考慮することを要因についてアドバイスします。
