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

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

WBOY

リリース： 2023-06-24 14:20:58

オリジナル

2072 人が閲覧しました

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