vue-router の 2 つのモードの違いは何ですか?-フロントエンドQ&A-php.cn

vue-router の 2 つのモードの違いは何ですか?

青灯夜游

リリース： 2022-03-03 16:39:45

オリジナル

5986 人が閲覧しました

違い: 1. 履歴 URL には「#」記号がありませんが、ハッシュにはあります; 3. 履歴によって変更される URL は同じドメイン内の任意の URL にすることができますが、ハッシュは URL です同じドキュメントの 3. 同じ URL の場合、履歴はブラウザ履歴スタックへの追加をトリガーしますが、ハッシュはトリガーしません。

vue-router の 2 つのモードの違いは何ですか?

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

vue-router の 2 つのモード

1.hash モード

vue -router のデフォルトモードは hash'[hæʃ]' で、URL のハッシュを使用して完全な URL をシミュレートするため、URL が変更されてもページはリロードされず、単一ページアプリケーションになります。 # の背後にあるハッシュが変更されても、ブラウザーはサーバーにリクエストを送信しません。ブラウザーがリクエストを送信しない場合、ページは更新されず、hasChange イベントがトリガーされてページの一部が更新されます。ハッシュ値の変化を監視してコンテンツを監視し、動作します。

ハッシュモードの場合、hashHistory オブジェクトが作成されます。異なるルートにアクセスすると、次の 2 つのことが起こります:

HashHistory.push() は、ブラウザアクセスの履歴に新しいルートを追加します。 HasHistory.replace() は現在のスタックの先頭にあるルートを置き換えます。

vue-router の 2 つのモードの違いは何ですか?

#2.history モード

HTML5 標準のリリースにより、さらに 2 つのモードが追加されました。 API、pushState() および replaceState()。これら 2 つの API

(1) を使用すると、リクエストを送信せずに URL アドレスを変更できます。

(2) 履歴スタックを読み取るだけでなく、ブラウザ履歴スタックを変更することもできます。

さらに、popState() があり、ブラウザが新しい状態にジャンプすると、popState イベントがトリガーされます。

履歴状態の追加/変更

には 2 つのメソッド

pushState と replaceState が含まれています。これら 2 つのメソッドは 3 つのパラメータを受け取ります: stateObj 、タイトル、url

// 逐条添加历史记录条目
window.history.pushState(stateObject, title, URL)
// 修改历史记录
window.history.replaceState(stateObject, title, URL)

ログイン後にコピー

スイッチ履歴レコード

には、

back、forward、が含まれます。この 3 つのメソッドは次のようになります。 は、ブラウジングの進む、戻る、進む操作に対応します。

違い:

history と hash はどちらもブラウザの 2 つの機能を使用してフロントエンドルーティング、history を実装します。閲覧履歴スタックの API 実装を使用し、位置オブジェクトのハッシュ値変更イベントを監視することでハッシュ化を実装します。
履歴の URL には「#」記号がありません、ハッシュはその逆です
履歴によって変更される URL は同じドメイン内の任意の URL にすることができ、ハッシュは同じドキュメントの URL です。
同じ URL の場合、履歴はブラウザ履歴スタックへの追加をトリガーしますが、ハッシュはトリガーされません。

ヒストリーはハッシュ URL よりも美しいです (ハッシュなし)。 '# ')

履歴によって変更された URL は同じドメイン内の任意の URL にすることができ、ハッシュは同じドキュメントの URL のみにすることができます
history モードバックエンドのサポートが必要な場合が多いです。バックエンド nginx がルーティングアドレスをカバーしていない場合、404 が返されます。ハッシュは同じドキュメントの URL なので、バックエンドがルーティングアドレスをカバーしていない場合でも、
履歴モードで何を恐れていますか?

(バックエンドが準備されていない場合)、リフレッシュは実際にサーバーを要求するためです。

履歴モードでは、自由にパスを変更できます。履歴モードの最終的なルーティングは URL のパス名に反映され、この部分はサーバーに送信されるため、サーバーは可能なパス値をそれぞれ適切にマッピングする必要があります。

更新時に、サーバー内に対応する応答またはリソースがない場合、404 が 1 分ごとにフラッシュされます。 (学習ビデオ共有:

vuejs チュートリアル

、Web フロントエンド)

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