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# を学びに来ません。

##グローバル ガード

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

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

navigation

router.beforeEach

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

from: Route

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

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

next(false):

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

false

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

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

beforeEach

beforeResolve

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

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

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

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

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

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

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

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

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

beforeRouteUpdate の場合、

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

の場合、this

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

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

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

ガードを呼び出します。

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 サイトの他の関連記事を参照してください。