ルーティングのハッシュモードと履歴モードの違い

Vue-Router には、ハッシュモードと履歴モードの 2 つのモードがあります。デフォルトのルーティングモードはハッシュモードです。

1.ハッシュモード

1.1 はじめに

ハッシュモードは開発時のデフォルトモードであり、その URL には # が含まれます。

例: http://www.abc.com/#/vue、そのハッシュ値は ** #/vue** です。

1.2 特徴

ハッシュ値は URL に表示されますが、HTTP リクエストには表示されず、バックエンドにはまったく影響しません。したがって、ハッシュ値を変更してもページはリロードされません。
このモードのブラウザーサポートは非常に優れており、下位バージョンの IE ブラウザーもこのモードをサポートしています。
ハッシュルーティングはフロントエンドルーティングと呼ばれ、SPA (Single Page Application) の標準構成になっています。

1.3 原則！! !

ハッシュモードの主な原則はonhashchange()イベントです

利点：

ページのハッシュ値が変化すると、ウィンドウはバックエンドにリクエストを行うことなくイベントの変化を監視し、ルールに従って対応するコードをロードできます

ハッシュ値の変更に対応する URL はブラウザによって記録されるため、ブラウザはページの前後を認識できます。

バックエンドサーバーへのリクエストはありませんが、ページのハッシュ値は対応する URL に関連付けられています。

 // js中有一个事件hashchange
window.onhashchange = function() {
    
    
    // 可以获取到app的data值，也可以设置值
    // console.log(app.currentCom)
    // 获取锚点值
    let curhash = location.hash.slice(1)
    console.log(curhash)
    switch (curhash) {
    
    
        case '/login':
            app.currentCom = 'login'
            break
        case '/reg':
            app.currentCom = 'reg'
            break
        case '/index':
            app.currentCom = 'index'
            break
    }
}

2.履歴モード

2.1 はじめに

従来のルーティング分散モードを使用する履歴モードの URL には# がありません。つまり、ユーザーが URL を入力すると、サーバーはリクエストを受信し、URL を解析して、対応する論理処理を行います。

2.2 特徴

履歴モードを使用する場合、URL は http://abc.com/user/id のようになります。ハッシュモードよりも見栄えがします。
履歴モードにはバックグラウンド設定のサポートが必要で、バックグラウンドが正しく設定されていないと、アクセス時に 404 が返されます。
API: 履歴 API は、履歴状態の切り替えと履歴状態の変更の2 つの部分に分けることができます。
- 履歴状態の変更:
- 新しく追加された ** pushState()** と HTML5 History Interface のreplaceState()メソッドを含め、これら 2 つのメソッドはブラウザの履歴スタックに適用され、 history を変更する機能を提供します。彼らが変更を加えると、URL は変更されますが、ブラウザはすぐにバックエンドにリクエストを送信しません。ページを更新せずに URL を変更したい場合は、フロントエンドでこれら 2 つの API を使用する必要があります。
- 履歴状態の切り替え:
- ブラウザの進む、戻る、ジャンプの操作に対応したforward()、back()、go()3つのメソッドを搭載。
- 履歴モードは醜い # を破棄しますが。ただし、それには独自の欠点もあります。つまり、ページが更新されたときに、対応するルートまたはリソースがない場合、404 が表示されます。
- 履歴モードに切り替えたい場合は、以下を構成する必要があります (バックエンドも構成する必要があります)。
```
const router = new VueRouter({
	mode:'history',
	routes:[...]
})
```

3. 2 つのモードの比較

ハッシュを直接変更する場合と比べて、 history.pushState() を呼び出すことには次の利点があります: pushState() によって設定される新しい URL は、現在の URL と同じソースを持つ任意の URL にすることができます; 一方、ハッシュは # の後の部分のみを変更できるため、現在の URL はドキュメントの URL と同じです。
pushState() によって設定された新しい URL は現在の URL とまったく同じである可能性があり、これによりレコードもスタックに追加されますが、ハッシュによって設定された新しい値は、アクションをトリガーしてレコードを追加するために元の値とは異なる必要があります。スタックへ。
pushState() は stateObject パラメーターを介して任意のタイプのデータをレコードに追加できますが、ハッシュは短い文字列しか追加できません。
pushState() は、後で使用するために title 属性を追加で設定できます。
ハッシュモードでは、ハッシュ記号の前の URL のみがリクエストに含まれます。バックエンドがルートを完全にカバーしていない場合、404 エラーは返されません。
履歴モードでは、フロントエンドの URL は、実際にバックエンドへのリクエストを開始する URL と同じである必要があります。正しいルート処理がない場合は、404 エラーが返されます。
ハッシュモードとヒストリーモードにはそれぞれ一長一短があり、実際の状況に応じて使い分ける必要があります。

ルーティングのハッシュ モードと履歴モードの違い

ルーティングのハッシュ モードと履歴モードの違い

1.ハッシュモード

1.1 はじめに

1.2 特徴

1.3 原則！! !

2.履歴モード

2.1 はじめに

2.2 特徴

3. 2 つのモードの比較

おすすめ

ルーティングのハッシュモードと履歴モードの違い

ルーティングのハッシュモードと履歴モードの違い