vueのルーティングフック関数は何種類ありますか?違いは何ですか?

vue ルーティング フック関数には、1. 「index.js」内のルーター オブジェクトを参照するグローバル ガード (グローバル フック関数)、2. ルーティング ガード (単一ルーティング用) の 2 種類があります。フック関数) ); 3. コンポーネント ガード (コンポーネント レベルのフック関数) は、ルーティング コンポーネント内で定義されるガードです。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

vue-router の フック関数 は、実際には ナビゲーション ガード を参照します。

公式サイトより引用

「Navigation」はルートが変更中であることを示します。

vue-router 提供されるナビゲーション ガードは、主に jump または cancel Guard Navigation# に使用されます。 ##。ルート ナビゲーション プロセスを組み込む機会は複数あります。グローバル、単一ルート専用、またはコンポーネント レベルです。

つまり:

グローバル ガード (グローバル フック関数) , ルーティング ガード (単一のルーティング フック関数の場合) , コンポーネント ガード (コンポーネント-レベルのフック関数)。

コードデモ環境構築

まずは簡単な環境設定

index.js

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/a',
      component: () => import('../components/A.vue'),
    },
    {
      path: '/b',
      component: () => import('../components/B.vue'),
    },
    {
      path: '/c',
      component: () => import('../components/C.vue'),
    },
  ],
});
export default router;

main.js

// index.js
import router from "./router"; 
createApp(App).use(router).mount("#app");

ページA

<template>
  <div>
    <h1>我是页面A啊</h1>
    <comp></comp>
  </div>
</template>

ページB

<template>
  <div>
    <h1>我是页面B啊</h1>
    <comp></comp>
  </div>
</template>

ページC

<template>
  <div>
    <h1>我是页面C啊</h1>
    <comp></comp>
  </div>
</template>

一般コンポーネント

<template>
  <div>我是公用组件啊</div>
</template>

現在のページはこのようなものですが、少し見にくいですが、ただ見てみましょう。ここでは

css# を学びに来ません。

##グローバル ガード

名前が示すように、これはグローバルに定義されており、

index.js## の

router オブジェクトです。 ＃。 beforeEach

グローバル フロント ガード。ルート ジャンプ前にトリガーされ、

navigation

のたびにトリガーされます。

router.beforeEach

を通じてグローバル beforeEach ガードを登録します。

#パラメータ

beforeEach

グローバル フロント ガードは、次の 3 つのパラメータを受け取ります。 Route

: 進入しようとしているターゲット ルート オブジェクト

from: Route

: 現在のナビゲーションが出発しようとしているルート オブジェクト

• next: Function: このメソッドを呼び出す必要があります。そうしないと、ルーティングがブロックされます。
• 注:
• next パラメータを追加する必要はありませんが、追加したら一度呼び出す必要があります。そうしないと、ルーティング ジャンプなどが停止します。 。

next()

メソッドのいくつかの状況next():

パイプラインの次のフックに進みます。

next(false):

現在のナビゲーションを中断します。

from
• ルートに対応するアドレスに戻ります。
next('/') または next({ path: '/' }):
• 別のアドレスにジャンプします。渡せるパラメータは router と同じです.push オプションは同じです。
next(error):
• ナビゲーションが終了し、エラーが router.onError() 登録されたコールバックに渡されます。
最初の 2 つのパラメータを出力して見てみましょう。これらにはパス、パラメータ、メタ情報などが含まれています。
• #戻り値

false

: 現在のナビゲーションをキャンセルします。

null、未定義、true、または直接戻り

: 次のナビゲーション ガードを呼び出します。

• 複数のガードの定義複数のグローバル フロント ガードを定義し、作成順序に従ってそれらを呼び出すことができます。すべてのガードが完了するまでナビゲーションは保留されます。
• 次の例では、2 つの beforeEach グローバル プレガードを定義します。 2 つのログが 2 秒後に出力された後にのみページ ジャンプが発生していることがわかります。

beforeEach

グローバル フロント ガードを除き、他のグローバル ガードは複数回定義でき、ナビゲーションが待機中です。すべてのガードが完了するまで、他のフック機能は発揮されません。

beforeResolve

グローバル解析ガード、ルーティング ジャンプの前、すべての 内部ガード

と

非同期ルーティング コンポーネントは解析後にトリガーされます。これは同じです各ナビゲーション

で発生します。

router.beforeResolve を通じてグローバル解像度ガードを登録します。

router.beforeResolve((to, from, next) => {
  next();
})

コールバック パラメータ、戻り値は beforeEach と同じです。複数のグローバル解析ガードを定義することもできます。

afterEach

グローバル ポスト フック。ルート ジャンプの完了後に発生します。beforeEach および beforeResolve、beforeRouteEnter (コンポーネントの内部ガード) ） 前に。また、移動するたびにも起動されます。

router.afterEach を通じてグローバル ポスト フックを登録します。

このフックの 2 つのパラメーターは、beforeEach の to および from と同じです。ただし、他のグローバル フックとは異なり、これらのフックは next 関数を受け入れず、ナビゲーション自体を変更しません。

ルート ガード

名前のとおり、ルーティングに関連するフックです。ルーティング ガードは beforeEnter という 1 つだけあります。

beforeEnter

ルーティング設定で beforeEnter ガードを定義する必要があります。このガードはルートに入るときにのみトリガーされ、beforeEach# の直後に実行されます。 ##. params、query、または hash が変更された場合には起動しません。

beforeEnter ルート ガードのパラメータは to、from、next# です。 ## 、 beforeEach と同じ。 コンポーネント ガード

名前が示すように、ルーティング コンポーネント内で定義されるガードです。

beforeRouteEnter

は、ルートがコンポーネントに入る前に呼び出されます。このフックは、グローバル ガード

beforeEach

とルート ガード # にあります。 ##beforeEnter の後、グローバル beforeResolve が呼び出され、その前にグローバル afterEach が呼び出されます。 パラメータには、to

、

from、next が含まれます。 コンポーネントのインスタンスは、このガードではアクセスできません。つまり、this

は

未定義です。つまり、beforeCreate# の前にトリガーされます。 ＃＃ ライフサイクル。 beforeRouteUpdate

beforeRouteUpdate の場合、

this

はすでに使用可能であるため、next ## を指定してください# コールバックを渡す必要はありません。 beforeRouteLeave

beforeRouteLeave

の場合、this

はすでに使用可能であるため、

next ## を指定してください# コールバックを渡す必要はありません。 概要ナビゲーション解析プロセスの完了

ナビゲーションがトリガーされます。

非アクティブ化されたコンポーネントで

beforeRouteLeave

ガードを呼び出します。

1. グローバル
beforeEach
2. ガードを呼び出します。 再利用されたコンポーネントで
beforeRouteUpdate
3. ガードを呼び出します。 ルーティング設定で
beforeEnter
4. を呼び出します。 非同期ルーティング コンポーネントを解決します。
5. アクティブ化されたコンポーネントで beforeRouteEnter を呼び出します。
6. グローバル
beforeResolve
7. ガードを呼び出します。 ナビゲーションを確認しました。
8. グローバル afterEach フックを呼び出します。
9. DOM
10. 更新をトリガーします。
beforeRouteEnter
11. ガードの next に渡されるコールバック関数を呼び出すと、作成されたコンポーネント インスタンスがコールバック関数のパラメーターとして渡されます。
12. 上記は正式な回答ですが、フローチャートを使用して視覚的に表示します。

関連する推奨事項: 「

vue.js チュートリアル

」

以上がvueのルーティングフック関数は何種類ありますか?違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。