Vue アプリケーションで vue-router エラー「NavigationDuplicated: 現在の場所への冗長なナビゲーションを回避しました」が発生しました。これを解決するにはどうすればよいですか?

Vue アプリケーションで vue-router エラー「NavigationDuplicated: 現在の場所への冗長なナビゲーションが回避されました」が発生しました。これを解決するにはどうすればよいですか?

Vue.js は、高速で柔軟な JavaScript フレームワークとして、フロントエンド アプリケーション開発でますます人気が高まっています。 Vue Router は、ルーティング管理に使用される Vue.js のコード ライブラリです。ただし、Vue アプリケーションで「NavigationDuplicated」エラーが発生すると、Vue Router の使用が困難になる場合があります。この記事では、このエラーを解決する方法について説明します。

Vue Router で、同じルーティング パスを複数回切り替えると、「NavigationDuplicated」エラーが発生します。たとえば、ユーザーが同じナビゲーション リンクを複数回クリックすると、コンソールにこのエラーが表示されます。

エラー メッセージは通常、次のようになります。

"NavigationDuplicated: 現在の場所への冗長なナビゲーションを回避しました: "/your-route-path"

このエラー メッセージは、次のことを示しています。同じ URL アドレスでの複数のページ ルーティング ジャンプは許可されていません。この問題の根本的な原因は、Vue Router がルートの正しいナビゲーションを保証するために URL パスを使用することです。ルーティング パスが同じで、パラメータが同じ場合、ルートは同じルートとして扱われます。

次に、「NavigationDuplicated」エラーを解決できるいくつかの方法を紹介します。

方法 1: catch 関数を使用する

try-catch ステートメントはルート ナビゲーションをラップし、catch 関数を使用してこのエラーをキャッチし、適切に処理できるようにします。

try {
   await this.$router.push(myRoute)
} catch (err) {
   if(err.name !== 'NavigationDuplicated') {
      throw err
   }
}

このコード スニペットでは、try-catch ステートメントを使用します。 catch ステートメントを使用して、ナビゲーションをルート コードにラップします。try コード ブロックでは、$router.push() を介して指定されたルートに移動します。これにより、「NavigationDuplicated」エラーが発生します。catch コード ブロックでは、エラーが発生した場合、 「NavigationDuplicated」ではない場合、このエラーを再スローします。「NavigationDuplicated」エラーの場合、他の操作は実行されません。

もちろん、これは問題を解決する 1 つの方法にすぎません。

方法 2: 重複したルートを無視する

Vue Router には「ignoreDuplicates」というプロパティがあります。これが true に設定されている場合、重複したルートを無視できます。このプロパティは、Vue Router のグローバル設定で設定できます。

export default new Router({
   mode: 'history',
   base: process.env.BASE_URL,
   routes,
   ignoreDuplicates: true,
})

このコード スニペットでは、ignoreDuplicates プロパティを true に設定します。つまり、同じルートが繰り返しナビゲートされる場合、Vue Router は

これは簡単な解決策であり、コードの量を節約できますが、この方法はルーティングの損失やその他の問題を引き起こす可能性があるため、注意して使用する必要があります。方法 3: Vue Router フックを使用する

Vue Router には、ルート ナビゲーションが変更されたときにカスタム メソッドを実行できるライフ サイクル フック関数がいくつかあります。これらのフック関数を使用して、「NavigationDuplicated」エラーを解決できます。

const router = new VueRouter({
      routes: [],
});

router.beforeEach((to, from, next) => {
   if(to.path === from.path) {
      return false;
   }
   next();
});

この例では、ルート変更時に beforeEach フック関数を使用します。ジャンプ先の次のルートの URL が現在のルートの URL と同じである場合、Vue Router が新しいルートに移動するのを防ぎます。こうすることで、NavigationDuplicated エラーを回避できます。

これは、ルーティング時に発生する「NavigationDuplicated」エラーを効果的に解決できる、シンプルで洗練されたソリューションです。

Vue Router の「NavigationDuplicated」エラーは、Vue.js アプリケーション開発で遭遇する一般的なエラーの 1 つである可能性があることがわかります。幸いなことに、Vue.js アプリケーションのユーザーにより良いエクスペリエンスを提供するために、いくつかのシンプルかつ効果的な方法でこの問題を解決できます。

以上がVue アプリケーションで vue-router エラー「NavigationDuplicated: 現在の場所への冗長なナビゲーションを回避しました」が発生しました。これを解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。