Vue のルータールーティングの 2 つのモード (ハッシュと履歴) の詳細な説明

ハッシュモード（デフォルト）

動作原理:ウェブページのハッシュ値の変化を監視する—> onhashchange イベント、location.hash を取得

URL のハッシュを使用して完全な URL をシミュレートし、URL が変更されてもページが再読み込みされないようにします。

これにより、ユーザーは Web ページがリダイレクトされたように感じますが、実際にはリダイレクトされていません。

主にシングルページアプリケーション（SPA）で使用される

//シミュレーション原理//ページハッシュ値の変更を監視する window.onhashchange = function(){
	// 現在の URL のハッシュ値を取得します。const _hash = location.hash
	// ハッシュ値に応じて異なるコンテンツを表示する switch(_hash) {
	     ケース '/#a':
	        document.querySelector('#app').innerHTML = '<h1>私はページ 1 のコンテンツです</h1>'
	        壊す;
	     ケース '/#b':
	        document.querySelector('#app').innerHTML = '<h1>私はページ 2 のコンテンツです</h1>'
	        壊す;
	     ケース '/#c':
	        document.querySelector('#app').innerHTML = '<h1>私はページ 3 のコンテンツです</h1>'
	        壊す;
	} 
}

履歴モード

動作原理：主に使用ページを更新せずに URL を変更するには、history.pushState() API を使用します。

実際には、ページを更新せずに URL を変更できるモードが 5 つあります。

履歴.pushState()

履歴.replaceState()

履歴.go()

history.back() --> history.go(-1) と同等

history.forward() --> history.go(1) と同等

バックエンド構成のサポートが必要です。存在しない URL を入力した場合は、バックエンド構成を「バックアップ構成」として使用する必要があります。404 を返す代わりに、ホームページに戻ります。

履歴モードを有効にする

const ルーター = 新しい VueRouter({
  モード: '履歴'、
  ルート: [...]
})

上記は、Vue のルータールーティングの 2 つのモード、ハッシュと履歴の詳細な内容です。Vue のルータールーティングモードの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。