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){ } 解決ガード

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

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

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 の他の関連記事もご覧ください。