vue の router.beforeEach が 2 回実行されるのはなぜですか?

Vue の router.beforeEach は、1. 間違ったナビゲーション順序、2. 複数のルーティング ガード、3. Vuex ストレージの変更により 2 回実行される可能性があります。これを回避するには、beforeEach でのナビゲーションの実行を避け、複数のルート ガードをマージし、監視を使用して Vuex ストレージの変更をリッスンします。

Vue の router.beforeEach が 2 回実行されるのはなぜですか?

router.beforeEach は、ルート ナビゲーションが発生する前にトリガーされる Vue Router のフック関数です。通常は 1 回のみトリガーされますが、特定のケースでは 2 回トリガーされる場合があります。

考えられる理由:

• 間違ったナビゲーション シーケンス: beforeEach フック関数のルート ナビゲーション内で実行された場合、フック関数が再度トリガーされます。これは、ルート ナビゲーションが非同期プロセスであり、完了する前に beforeEach フック関数が実行された可能性があるためです。
• 複数のルート ガード: beforeEach フック関数に登録された複数のルート ガード (グローバルおよびルートごと) がある場合、それらはすべてトリガーされます。これにより、ロジックの重複や予期しない動作が発生する可能性があります。
• Vuex ストレージの変更: beforeEach フック関数が Vuex に保存された状態に依存し、ナビゲーション中に状態変更がトリガーされた場合、フック関数が再度呼び出される可能性があります。 。これは、Vuex ストレージの変更によりコンポーネントの再レンダリングがトリガーされ、ルート ナビゲーションが発生するためです。

回避方法:

router.beforeEach が 2 回トリガーされるのを回避するには、次の措置を講じることができます:

• beforeEach フック関数でルート ナビゲーションを実行しないでください: beforeEach フック関数でルート ナビゲーションを実行する必要がある場合は、## を使用してください。 #next() 現在のナビゲーションが完了するまでナビゲーションを遅らせるコールバック。
• 複数のルート ガードをマージする: beforeEach フック関数を登録する必要があるルート ガードが複数ある場合は、それらを 1 つの関数にマージすることを検討してください。
• watch を使用して Vuex ストレージの変更を監視します: beforeEach フック関数が Vuex ストレージの状態に依存する場合は、Vuex の watch()## を使用してください。 # ナビゲーション中に状態変更をトリガーするのではなく、状態変更をリッスンする関数。

結論:

router.beforeEach

Vue で 2 回トリガーされるのは、通常、間違ったナビゲーション順序、複数のルート ガード、または Vuex ストアが原因です。変化します。上記の対策に従うことで、この状況を回避し、beforeEach フック関数が期待どおりに実行されるようにすることができます。

以上がvue の router.beforeEach が 2 回実行されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。