Vue アプリケーションで vue-router を使用するときに「エラー: ナビゲーション ガードを介して 'xxx' から 'yyy' に移動するとリダイレクトされました」という問題を解決するにはどうすればよいですか?

Vue アプリケーションで vue-router を使用するときに「エラー: ナビゲーション ガードを介して "xxx" から "yyy" に移動するとリダイレクトされました」という問題を解決するにはどうすればよいですか?

Vue は、インタラクティブな Web アプリケーションの構築を容易にする人気の JavaScript フレームワークです。 Vue Router は Vue の公式ルーターであり、Vue アプリケーションでのナビゲーションとルーティングを処理するコア プラグインです。ただし、vue-router を使用すると、「エラー: ナビゲーション ガードを介して "xxx" から "yyy" に移動するときにリダイレクトされました」という一般的なエラーが発生することがあります。このエラーは初心者を非常に混乱させます。そこで、この記事ではこのエラーの原因と解決策を紹介します。

エラーの原因

vue-router を使用する場合、特定のページにアクセスするときにユーザーの権限を制御するためにルーティング ガードを使用することがよくあります。たとえば、ルート ガードを使用して、ユーザーがログインしていないときにログイン ページにリダイレクトできます。ただし、ルート ガードを使用すると、次のエラーが発生することがあります。

Error: Redirected when going from "xxx" to "yyy" via a navigation guard

このエラーの理由は、beforeEach() メソッドを使用してユーザーをリダイレクトしましたが、状況を適切に「リダイレクト」処理しなかったためです。 。ユーザーをリダイレクトする場合は、Vue Router にこの事実を知らせる必要があります。そうしないと、Vue Router はリダイレクトしなかったと判断します。

解決策

このエラーを解決するには、ルーティング ガードの使用方法を適切に変更する必要があります。考えられる解決策は次のとおりです。

1. next(false) を使用します。

next(false) を使用すると、何もせずにルートを終了することになります。 。したがって、beforeEach() で next(false) を使用すると、このエラーを回避できます。

たとえば、次のようにルーティング ガードを変更できます:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login') //重定向到登录页
  } else {
    next(false) //终止路由
  }
})

2. Use next({ path: '/login' })

When next ({ path: '/login' }) を使用します。これは、ユーザーを指定されたパス (ここでは /login) にリダイレクトすることを意味します。こうすることで、Vue Router はリダイレクトされたことを認識します。

たとえば、次のようにルーティング ガードを変更できます:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ path: '/login' }) //重定向到登录页
  } else {
    next() //正常路由
  }
})

3. Use next({ name: 'login' })

use next( { name: 'login' }) は、指定された名前のルートにユーザーをリダイレクトすることを意味します。この名前は、Vue Router で定義されたルート名です。

たとえば、「login」という名前のルートを次のように定義できます:

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  }
]

次に、ルート ガードを次のように変更できます:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'login' }) //重定向到具有名称“login”的路由
  } else {
    next() //正常路由
  }
})

まとめ

Vue Router を使用する場合、ルート ガードの使用方法を理解する必要があります。ルート ガードは、ユーザーのアクセス許可を制御し、ユーザーを指定されたページにリダイレクトするのに役立ちます。ただし、ルート ガードを使用すると、「エラー: ナビゲーション ガードを介して "xxx" から "yyy" に移動するときにリダイレクトされました。」というエラーが発生することがあります。現時点では、next(false)、next({ path: '/login' })、next({ name: 'login' }) を使用するなど、ルーティング ガードの使用方法を適切に変更する必要があります。 , などなので、このエラーは回避できます。

以上がVue アプリケーションで vue-router を使用するときに「エラー: ナビゲーション ガードを介して 'xxx' から 'yyy' に移動するとリダイレクトされました」という問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。