Vue アプリケーションで vue-router を使用するときに「NavigationDuplicated: 現在位置への冗長なナビゲーションを回避しました」という問題を解決するにはどうすればよいですか?-Vue.js-php.cn

Vue.js は人気のある JavaScript フレームワークです。シングルページ Web アプリケーションを構築するための多くの機能とツールを提供します。 Vue-router は、Vue.js で一般的に使用されるルーティング管理ツールです。これは、シングルページアプリケーション (SPA) でルーティングを実装するのに役立ちます。

ただし、vue-router を使用すると、「NavigationDuplicated: 現在の場所への冗長なナビゲーションが回避されました」エラーが発生する場合があります。この問題は通常、ユーザーがルーティングパスを繰り返しクリックしたときに発生します。この場合、vue-router は「現在の場所への繰り返しアクセスを避ける」というプロンプトを表示します。

なぜこのエラーが発生するのでしょうか?これは、ユーザーが同じアドレスに繰り返しアクセスすることを vue-router が検出し、ページコンポーネントの読み込み中に問題が発生する可能性があるためです。したがって、vue-router のナビゲーションガードは、ナビゲーションの繰り返しを避けるためにページの読み込みを停止します。

それでは、この問題をどうやって解決すればいいのでしょうか?

1. ナビゲーションガードを無効にする

最初の方法は、vue-router でナビゲーションガードを無効にすることです。ナビゲーションガードは、異なるルート間の切り替えや、ルートのステータス、許可などの管理に役立つ非常に強力な機能であるため、このアプローチではルートの管理方法が崩れる可能性があります。ただし、シナリオによっては、ナビゲーションガードを無効にすることが問題を解決する効果的な方法となる場合があります。

ナビゲーションガードを無効にするには、ルーティング設定でナビゲーションガードを削除するだけです:

const router = new VueRouter({ routes: [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact }, ], mode: 'history', base: process.env.BASE_URL, scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } } })

ログイン後にコピー

2. 解決策

2 番目の方法は、この問題を同時に解決することです。時間が経過しても、ナビゲーションガードの機能は保持されます。解決策は 2 つあります:

1. catch メソッドを使用します

catch メソッドは vue-router によって提供されるメソッドです。ナビゲーションガードの実行中にエラーが発生した場合、catch メソッドはメソッドが呼び出されます。現在のページに戻ることを避けるために、catch メソッドで false 値を返すことができます。

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

ログイン後にコピー

このようにして、ユーザーが同じアドレスに繰り返しアクセスした場合に、ナビゲーションが繰り返されることを回避できます。

2. replace メソッドを使用する

replace メソッドの方が優れた解決策です。このメソッドは、ナビゲーションガードをトリガーせずに同じアドレスにリダイレクトできます。ナビゲーションの繰り返しを避けるために、ルートのジャンプメソッドで replace メソッドを使用するだけで済みます。

this.$router.replace(to)

ログイン後にコピー

このようにして、ユーザーがクリックして同じルートにジャンプするたびに、重複したコンポーネントをロードすることなく、現在のルートが新しいルートに置き換えられます。これにより、ナビゲーションガードの問題が回避されます。

Vue アプリケーションで vue-router を使用するときに、「NavigationDuplicated: 現在の場所への冗長なナビゲーションを回避しました」エラーが発生するのは非常に一般的な問題です。必要に応じて、ナビゲーションガードを無効にするか、catch メソッドを使用するか、replace メソッドを使用してこの問題を解決するかを選択できます。

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