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

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 の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue-router ネストルーティングの詳細な説明
  • vue.js ルーターのネストされたルート
  • Vueルーティングルーターの詳細な説明
  • vue ルーティング ビュー router-view のネストされたジャンプの実装
  • VueRouterルーティングの詳細な説明
  • Vueルータールーティングの詳細な説明

<<:  MySQL のロックとトランザクションの簡単な分析

>>:  MySQL 8.0 における非同期レプリケーションの 3 つの方法について簡単に説明します。

推薦する

Linux でマウントされたファイルシステムの種類を表示する方法

序文ご存知のとおり、Linux は ext4、ext3、ext2、sysfs、securityfs、...

HTMLファイルとは何ですか？HTMLファイルを開く方法

HTML は Hypertext Markup Language の略です。現在、ほとんどの Web...

Linux ユーザー状態とカーネル状態間の通信方法の詳細な説明

CPU 権限の制限により、Linux ユーザー状態とカーネル状態間の通信は、プロセス間通信を使用した...

...

Elasticsearch を使用する際の一般的な問題の解決策

1. redis で使用すると Netty の起動競合が発生するため、***Application ...

MySQLは遅いSQLを開始し、原因を分析します

ステップ1. MySQLスロークエリを有効にする方法1: 設定ファイルを変更するWindows: W...

MySQL アカウント情報をエレガントにバックアップする方法

序文：最近、インスタンスの移行の問題に遭遇しました。データの移行後、データベースのユーザーと権限も移...

中国語フォントの英語名まとめ

CSS の font-family プロパティを使用して中国語フォントを参照する場合、フォントを定義...

ウェブ画像のホットリンクと座標値を設定するサンプルコード

時には、画像上に複数の領域を設定する必要があります。マウスで画像のさまざまな領域をクリックしてさまざ...

JavaScript Alert関数の実行順序の詳細な説明

目次質問分析する解決するAlert() 関数を置き換えるsetTimeOut関数まとめ質問数日前、J...

Vue のドロップダウン ボックスのセカンダリ リンク効果を実装するためのサンプル コード

1. 成果を達成する 2. バックエンドから返されるデータ形式 「リスト」: [ { "i...

Docker を使用して静的 Web サイト アプリケーションを作成する (複数の方法)

静的ウェブサイトをホストできるサーバーは数多くあります。この記事では、nginx、apache、to...

Vueページの画像が表示されない問題の解決方法

新しいバージョンの設定インターフェースを作る際に、vueフレームワークを使用して実装しました。ページ...

Windows で複数の MySQL インスタンスを実行する方法

序文Windows では、各インスタンスに適切なパラメータを使用してコマンド ラインから複数の My...

レム適応の一般的なパッケージ3つについて

序文以前、rem適応についての記事を書きましたが、具体的なパッケージは紹介しませんでした。今日は、よ...