vue ルーティング モードとは何ですか?

Vue ルーティング モードには次のものが含まれます: 1. ハッシュ モード: URL のハッシュ値をルートとして使用し、すべてのブラウザをサポートします。URL パスには「#」文字が表示されます。 2. 履歴モード、HTML5 API (古いブラウザではサポートされていません) と HTTP サーバー設定に依存します。バックグラウンド設定がないと、ページが更新されると 404 が表示されます。 3. 抽象モード、すべての JavaScript 環境に適しています。ブラウザ API を使用すると、ルーターは自動的にこのモードになります。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

ルーティング モードの分析

ここでは、vue-router のルーティング モードについて説明します。 URL が使用されているため、それに応じてさまざまな場所に移動できます。サーバー開発を行ったことがある場合、または http プロトコルをある程度理解している場合は、ブラウザーでのページへのアクセスはステートレスであるため、別のページに切り替えるときに再リクエストが行われることがわかります。実際に vue や vue-router を使って開発するとわかると思いますが、ページを切り替える際にページの再リクエストや再更新がなく、ステートフルになっているように見えますが、これはなぜでしょうか？これは実際には、ブラウザの History API の助けを借りて実現されます。これにより、ページを更新せずにジャンプでき、ページのステータスがブラウザ内で維持されます。

1. ハッシュ モード

URL のハッシュを使用して完全な URL をシミュレートするため、URL が変更されてもページはリロードされず、ネットワークはパスに「#」記号が表示されますが、これは少し見苦しいです。これは、すべてのブラウザおよびサーバーと互換性があるため、最も安全なモードです。

1-機能: ハッシュ モードの URL アドレスには '#'

 <a href=&#39;#/aaa&#39;>1(#/aaa)</a>

が含まれます。#/aaa はハッシュ値であり、ハッシュ値はサーバーに渡されません

2-実装の原則:

ネイティブ hashChange イベントは主に、イベント

ウィンドウを通じてハッシュ値の変更を監視することです。 onHashChange=function(){}

3-ページを更新します:

リクエストは発生せず、ページに問題はなく、バックエンドはありません。 required

と一致し、ハッシュモードの方が互換性が高いですが、「#」が含まれるため、美しい行はヒストリーモードには及びません。

2. 履歴モード

整形ハッシュ モードでは、パス内の "

#" が削除されます。 Html5 の History および PushState API に依存しているため、IE9 以降のバージョンについて心配する必要はありません。また、ブラウザの進む、戻る、ジャンプの操作に対応する、戻る、進む、進むという 3 つのメソッドも含まれています。ブラウザの左上隅にある進むボタンと戻るボタンによって実行される操作です。 [学習ビデオ共有: vue ビデオ チュートリアル 、Web フロントエンド ビデオ ]

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

しかし、歴史には欠点もあります。前方へのジャンプや後方へのジャンプを恐れないのであれば、 、更新は実際にサーバーを要求しているため、更新を恐れています（バックエンドが準備されていない場合）。

#要約すると、#1: ハッシュ モード (vue-router のデフォルト モードの URL の後に # が続く) は、URL のハッシュ値を次のように使用します。すべてのブラウザをサポート; 欠点: ルート ジャンプを実現するには、次の # を変更することしかできません。

2: 履歴モード (モード: 'history' による履歴モードへの変更) HTML5 (BOM) 履歴 API とサーバー構成の欠点: 更新の恐れ バックエンドがこの状況を処理しない場合、フロントエンドの更新は実際のリクエスト。サーバーは多くの時間を消費し、非常に遅いです。

3. 抽象モード抽象は vue ルーティングの 3 番目のモードで、ブラウザ API をサポートしていない環境でフォールバックとして機能するために使用されます。ハッシュ モードまたはヒストリー モードでは、ブラウザ上の URL に影響します。実現したい一般的な機能は、既存のルーティング ページに他のルーティング ページを埋め込み、ブラウザに表示されている現在のページのルーティングを維持することです。 、これはブラウザから分離された抽象ルーティング モードです。

サーバー側での Node.js の使用など、すべての JavaScript 環境に適用できます。ブラウザ API がない場合、ルーターは自動的にこのモードになります。

それから、ここに切り替えてください

const router = new VueRouter({routes, mode:'hash|history|abstract',})

。

(学習ビデオ共有:

Web フロントエンド開発

、基本プログラミング ビデオ)

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