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