Vue2.x と Vue3.x のルーティングフックの違いの詳細な説明

Vue2.x と Vue3.x のルーティングフックの違いの詳細な説明

vue2.x

プレコンセプト:

ルーティングフックのカテゴリ

合計3つのカテゴリーと7つのフックがあります。

ルーティングとコンポーネントの概念(フック機能の理解を容易にするため)

ルーティングとコンポーネントは 2 つの概念であり、大まかに次のように考えることができます。

  • ルートはブラウザのURLです
  • コンポーネントは、Web ページに表示されるさまざまな種類のコンテンツです。

グローバルルーティングフック

router.beforeEach(to, from, next){ } 事前ナビゲーションガード

ルーティング前

router.afterEach(to, from, next){ } 投稿ナビゲーションガード

ルートが入った後

router.beforeResolve(to, from, next){ } 解決ガード

コンポーネントを解析するときに、すべての構成が読み込まれ、以前のレベルがすべて通過しています。コンポーネントを解析する前に実行します。

ルーティング構成ガードフック

[外部リンク画像の転送に失敗しました。ソースサイトにはアンチホットリンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-iNt9TxY9-1631622860323) (C:\Users\hwm\AppData\Roaming\Typora\typora-user-images\image-20210914193901604.png)]

beforeEnter() はルーティング構成情報を読み取る前に呼び出されます

beforeCreate() の前に実行される

const ルーター = 新しい VueRouter({
  ルート: [
    {
      パス: '/foo',
      コンポーネント: Foo、
      beforeEnter: (to, from, next) => { }
    }
  ]
})

コンポーネントのガードフック

beforeRouteEnter(to, from, next){ } コンポーネントに入る前

デフォルトでは、 thisコンポーネントインスタンスを取得することはできません。

ただし、次の方法でアクセスできます。

beforeRouteEnter(to, from, next){ 

  // next() のコールバック関数は、ルートに入るときにインスタンス化され実行されます next(vm => {
    // vmは現在のコンポーネントと同等です
  })
}

beforeRouteUpdate(to, from, next){ } コンポーネントを変更する前に

現在のコンポーネントはルーティングアドレスの変更をまだ使用しており、上記の2つの条件が満たされた場合にのみ実行されます。

beforeRouteLeave(to, from, next){ } コンポーネントを離れる前に

ルーティングフックの実行順序

例: コンポーネント A からコンポーネント B へジャンプする

beforeRouteLeave()最初にコンポーネントAを離れる

beforeEach()グローバル - フロントナビゲーションガード

ルーティング構成情報を読み取る前のbeforeEnter() (Bルーティング情報の読み取り)

コンポーネントに入る前にbeforeRouteEnter()

beforeResolve()解決ガード

afterEach()グローバル - 投稿ナビゲーションガード

ルート B に更新がある場合、次の 3 つのフックが毎回実行されます。

beforeEach()グローバル - 事前ナビゲーションガード

beforeResolve()グローバル - 解決ガード

コンポーネント内のbeforeRouteUpdate() - コンポーネントを変更する前

vue3.x

Vue3.x は vue2.x とわずかに異なるだけなので、ここでは違いについてのみ説明します。

比較表

画像の説明を追加してください

相違点と補足:

  • Vue2.x には 3 つのコンポーネントがあります。コンポーネント A がコンポーネント B にジャンプする場合、コンポーネント B にはサブコンポーネントがあります。

コンポーネントBのサブコンポーネントはルーティングフックをトリガーしません。

  • Vue3.x には 3 つのコンポーネントがあります。コンポーネント A がコンポーネント B にジャンプする場合、コンポーネント B にはサブコンポーネントがあります。

コンポーネントBのサブコンポーネントはルーティングフックをトリガーします: onBeforeRouteUpdateとonBeforeRouteLeave
コンポーネントBのサブコンポーネントはルーティングフックをトリガーしません。

  • Vue3.x には 3 つのコンポーネントがあります。コンポーネント A がコンポーネント B にジャンプする場合、コンポーネント B にはサブコンポーネントがあります。

コンポーネントBのサブコンポーネントはルーティングフックをトリガーします: onBeforeRouteUpdateとonBeforeRouteLeave

以上が、Vue2.x と Vue3.x のルーティングフックの違いについての詳しい説明です。Vue2.x と Vue3.x のルーティングフックの違いについての詳細は、123WORDPRESS.COM の他の関連記事もご覧ください。

以下もご興味があるかもしれません:
  • vue3 キャッシュページキープアライブと統合ルーティング処理の詳細な説明
  • Vue3.0とBootstrapを組み合わせてマルチページアプリケーションを作成する
  • Vue3.0はドロップダウンメニューのカプセル化を実装します
  • Vue3+TypeScriptは再帰メニューコンポーネントの完全な例を実装します
  • Vue3ルーティングVueRouter4を使用する簡単な例
  • Vue2/vue3 ルーティング権限管理方法の例
  • Vue3 ページ、メニュー、ルートの使用

<<:  Linux システム (Centos6.5 以上) のインストール JDK チュートリアル分析

>>:  LinuxシステムにTomcatをインストールし、サービスの起動とシャットダウンを構成する

推薦する

MySQL における冗長インデックスと重複インデックスの違い

MySQL では、1 つの列に複数のインデックスを作成できます。意図的であるかどうかにかかわらず、M...

WebページでjQueryを参照する方法

CDN(コンテンツ配信ネットワーク)を通じて参照できます。 jQuery は Google と Mi...

Linux/CentOS サーバー セキュリティ構成の一般ガイド

Linux はオープン システムです。インターネット上には、既成のプログラムやツールが多数存在します...

CentOSにDockerをインストールする方法

ここでは比較的簡単なインストール方法のみを紹介します。 1. yumを使用してインストールするyum...

Element+vueを使用して開始時間と終了時間の制限を実装する

この記事の例では、Element+vueを使用して開始と終了の時間制限を実装するための具体的なコード...

Ubuntu 16.04 で PostgreSQL の起動を設定する方法

PostgreSQL はコンパイルされインストールされるため、起動時に起動するように設定する必要があ...

MySQLの3つの用途と違いは同等ではない

MySQLでは判定記号がよく使われますが、等しくない記号はもっと一般的に使われます。次の3つの等しく...

JavaがMySQL 8.0に接続できない問題の解決策

この記事では、参考までにMySQL 8.0に接続できないJavaの問題をまとめて紹介します。具体的な...

MySql で正規表現クエリを使用する方法

正規表現は、特定のパターンに一致するテキストを検索および置換するためによく使用されます。たとえば、テ...

JSはclip-pathを使用して動的領域クリッピング機能を実装します

背景今日、CodePen を閲覧していたところ、非常に興味深い効果を見つけました。 CodePen ...

HTML 5のドラフトは正式な標準にはならなかった

<br />昨日、W3C で新しいHTML 5 ドラフト (ワーキング ドラフト) が ...

MySQLの不合理なMaxIdleConnsにより接続が短くなる

1 背景最近、Shimo Document のオンライン ビジネスでパフォーマンスの問題が発生しまし...

Dockerでパラメータ変数を外部から指定する方法

この記事は主にDockerでパラメータ変数を外部から指定する方法を紹介します。この記事のサンプルコー...

MySQLのパラメータについてお話しましょう

序文:以前の記事では、特定のパラメータの機能についてよく紹介してきました。しかし、MySQL パラメ...