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

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