vue-router のハッシュモードと履歴モードの違い

vue-routerには2つのモードがあります

ハッシュモード
履歴モード

1. シングルページアプリケーション

シングルページアプリケーション

1. HTMLファイルは1つだけであり、ウェブサイト全体のすべてのコンテンツはこのHTMLにあり、JSによって処理されます。

2. ページ操作が更新されないだけでなく、ページジャンプも更新されません。シングルページアプリケーションを実現するには、フロントエンドとバックエンドの分離 + フロントエンドルーティングが必要です。 (ページを再リクエストせずにビューを更新します)

フロントエンドルーティング

実装は実際には非常に簡単です。異なる URL パスを一致させて解析し、さまざまなコンポーネントをロードして、地域の HTML コンテンツを動的にレンダリングするだけです。

アドバンテージ

優れたインタラクティブエクスペリエンス、ユーザーはページを更新する必要がなく、ページがスムーズに表示され、フロントエンドとバックエンドの作業分離モードが優れており、サーバーの負荷が軽減されます。

欠点

SEOには良くない、最初の読み込みに時間がかかる

2. ハッシュモード

原則: これは、ウィンドウオブジェクトでリッスンできるonhashchangeイベントです。

vue-routerのデフォルトモードはハッシュモードです

1. URLハッシュを使用して完全なURLをシミュレートする

2. URLが変更されてもページは再読み込みされない、つまりシングルページアプリケーションである

2. # の後のハッシュが変化すると、ブラウザはサーバーにリクエストを送信しません。ブラウザがリクエストを送信しない場合、ページは更新されず、hasChange イベントがトリガーされます。ハッシュ値の変化を監視することで、ページコンテンツの一部を更新する操作を実現できます。

window.onhashchange = 関数(イベント){
    console.log(イベント.oldURL、イベント.newURL);
    ハッシュをlocation.hash.slice(1)とします。
    document.body.style.color = ハッシュ;
}

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

1. HashHistory.push() は、新しいルートをブラウザのアクセス履歴スタックの先頭に追加します。

2. HasHistory.replace() は現在のスタックの一番上のルートを置き換えます。

3.履歴モード

history api の登場により、フロントエンドのルーティングが進化しました。以前の hashchange では、# の後の URL フラグメントのみを変更できましたが、history api ではフロントエンドに完全な自由が与えられます。

履歴APIは、切り替えと変更の2つの部分に分けられます。

3.1 履歴ステータスの切り替え

戻る、進む、進むなど、ブラウザの進む、戻る、ジャンプ操作に対応する 3 つのメソッドがあります。たとえば、(Google) ブラウザには進むと戻るしかなく、ジャンプはありません。進むボタンと戻るボタンをマウスで長押しすると、現在のすべてのウィンドウの履歴が表示され、ジャンプ (ジャンプと呼ぶ方が適切かもしれません) できるようになります。

history.go(-2);//戻るtwicehistory.go(2);//進むtwicehistory.back(); //戻るhistory.forward(); //進む

3.2 履歴ステータスを変更する

2つのメソッド：pushStateとreplaceStateが含まれます

これら2つのメソッドは、stateObj、title、urlの3つのパラメータを受け取ります。

history.pushState({color:'red'}, 'red', 'red'})

window.onpopstate = 関数(イベント){
    コンソール.log(イベント.状態)
    イベントの状態が赤の場合
        document.body.style.color = '赤';
    }
}

履歴を戻す

履歴を転送する

ステップ

1.pushstateを介してページの状態を状態オブジェクトに保存する

2. ページURLがこのURLに戻ると、event.stateを通じて状態オブジェクトを取得できます。

3. ページの状態を復元できるように

4. ここでのページ状態は、ページのフォントの色です。実際には、スクロールバーの位置、読み取りの進行状況、コンポーネントの切り替えなどのページ状態はすべて状態に保存できます。

3.3 履歴モードが恐れるものは何ですか?

ハッシュと履歴の違い

履歴モード

1. 履歴APIを通じて醜い#を取り除くが、問題もある。

2. 前進や後退を恐れるのではなく、更新を恐れてください。f5

——履歴モードでは、URLが通常のリクエストバックエンドのURLと同じになるように変更されます。バックエンドが対応する/user/idルーティング処理で構成されていない場合は、404エラーが返されます。

——したがって、この実装にはサーバーのサポートが必要であり、すべてのルートをルートページにリダイレクトする必要があります。

灰モード

1. 前のハッシュ変更では、# の後の URL セグメントのみを変更できます。 pushState によって設定される新しい URL は、現在の URL と同じオリジンを持つ任意の URL にすることができます。

2. フロントエンドルーティングは # の情報を変更し、ブラウザはリクエスト時にそれを使用しないため、問題はありません。ただし、履歴の下では、パスを自由に変更できます。リフレッシュ時に、サーバー内に対応する応答またはリソースがない場合、数分以内に 404 が表示されます。

要約する

これで、vue-router のハッシュモードと履歴モードの違いに関するこの記事は終了です。vue-router のモードの違いの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: