Vue のナビゲーション フックとは何ですか?

Vue には 3 種類のナビゲーション フックがあります: 1. グローバル ガード フック、これはルーティング サンプルに直接動作するフック関数を指し、すべてのルーティング設定コンポーネントがトリガーされるという特徴があります。 2. ルート専用ガードフックとは、単一ルート設定時にも設定でき、そのルート下でのみ動作するフック機能を指します。 3. ローカルガードフックとは、配列内のライフサイクル関数と同様にコンポーネント内で実行されるフック関数を指し、ルーティングが設定されたコンポーネントに追加されたライフサイクルフック関数に相当します。

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

#ナビゲーション フックの役割

vue-router が提供するナビゲーション フックは主に次の目的で使用されます。ナビゲーションをインターセプトします。ジャンプを完了させるか、キャンセルします。

#ナビゲーション フックの分類グローバル ガード

ルート非依存エンジョイ ガード
• ローカル ガード

1. グローバル ガード は、ルーティング例 機能の特徴は、すべてのルーティング構成コンポーネントがトリガーされることです。簡単に言うと、ルーティングをトリガーすると、これらのフック関数がトリガーされます。フック関数の実行順序には、beforeEach、beforeResolve、afterEach があります。

[beforeEach]<strong>: ルートがジャンプする前にトリガーされます。パラメーターには、to、from、next が含まれます。このフックの主な機能これはログイン認証に使用されます。つまり、ルートがジャンプする前に事前に通知され、ジャンプしてから通知するのが手遅れになることを回避します。 </strong><pre class="brush:js;toolbar:false;"> router.beforeEach router.beforeResolve router.afterEach const router = new VueRouter({ ... }); router.beforeEach((to, from, next) =&gt; { // do someting });</pre>

to: 入力するターゲットを表します。これはルーティング オブジェクトです。

• from: 現在出発しているルートを表します。これもルーティング オブジェクトです。
• next : これは呼び出す必要があるメソッドであり、具体的な実行効果は次のメソッド呼び出しのパラメータによって異なります。

#[beforeResolve] <strong>: このフックは beforeEach に似ています。ルートがジャンプする前にもトリガーされます。また、to、from、next の 3 つのパラメーターがあります。beforeEach との違いの公式説明は次のとおりです: </strong>

違いはナビゲーションが確認される前であり、すべてのコンポーネント内のガードと非同期ルーティング コンポーネントが解析された後、解析ガードが呼び出されます。

つまり、コンポーネント内の beforeEach と beforeRouteEnter の後、afterEach の後、および afterEach の前に呼び出されます。

[afterEach]<strong>: beforeEach とは対照的に、ルート ジャンプが完了した後にトリガーされます。パラメーターには to と from が含まれます。次に、beforeEach と beforeResolve の後、および beforeRouteEnter (ガード内のフットプリント) の前に発生します。 </strong><pre class="brush:js;toolbar:false;"> const router = new VueRouter({ ... }); router.beforeEach((to, from, next) =&gt; { // do someting }); //全局后置钩子，后置钩子并没有 next 函数，也不会改变导航本身 router.afterEach((to, from) =&gt; { // do someting });</pre>

2. ルート排他ガード は、単一のルートを構成するときにも設定でき、このルート下でのみ動作できるフック関数を指します。その場所は次のとおりです。つまり、File などのコンポーネントにはそのようなフック関数があります。現在、Enter の前にフック関数が 1 つだけあります。

[beforeEnter]: beforeEach とまったく同じです。両方を設定すると、beforeEach の直後に実行されます。パラメータは to、from、next です。

  cont router = new VueRouter({
        routes: [
            {
                path: '/file',
                component: File,
                beforeEnter: (to, from ,next) => {
                    // do someting
                }
            }
        ]
    });

3. ローカル ガード は、配列内のライフサイクル関数と同様、コンポーネント内で実行されるフック関数を指します。ルーティングを設定したコンポーネントにライフサイクルフック機能を追加しました。フック関数には、実行順に beforeRouteEnter、beforeRouteUpdate (2.2 の新機能)、beforeRouteLeave が含まれており、実行場所は次のとおりです:

 const File = {
        template: `<div>This is file</div>`,
        beforeRouteEnter(to, from, next) {
            // do someting
            // 在渲染该组件的对应路由被 confirm 前调用
        },
        beforeRouteUpdate(to, from, next) {
            // do someting
            // 在当前路由改变，但是依然渲染该组件是调用
        },
        beforeRouteLeave(to, from ,next) {
            // do someting
            // 导航离开该组件的对应路由时被调用
        }
    }

ルート ジャンプ ナビゲーションの解析process, when A からルーティングするとき ->B1. A コンポーネントでリーブ ガードを呼び出します。コンポーネント A の beforeRouterLeave

2 は、グローバル beforeEach ガードを呼び出します。 router.beforeEach

3. 次に、ルート B 設定で beforeEnter を実行します。

routes:[
      {
          path:'/b',
          component:B,
          beforeEnter:(to,form,next)=>{
             ..... 
          }
      }
  ]

4. 次に、コンポーネント B のエントリ ガードを実行します。コンポーネント B では、beforeRouterEnter

5 がグローバル beforeResolve ガード (2.5) を呼び出します。 router.beforeResolve

6. ナビゲーションが確認されました。

7. グローバルの afterEach フックを呼び出します。 router.afterEach

8、DOM 更新をトリガーします。

[関連する推奨事項:

vuejs ビデオ チュートリアル

、Web フロントエンド開発]

以上がVue のナビゲーション フックとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。