Comment résoudre le problème « Erreur : redirigé lors du passage de « xxx » à « yyy » via un garde de navigation » lors de l'utilisation de vue-router dans une application Vue ?

Comment résoudre le problème « Erreur : redirigé lors du passage de « xxx » à « yyy » via un garde de navigation » lors de l'utilisation de vue-router dans l'application Vue ?

Vue est un framework JavaScript populaire qui facilite la création d'applications Web interactives. Vue Router est le routeur officiel de Vue. Il s'agit du plug-in principal qui gère la navigation et le routage dans les applications Vue. Cependant, lors de l'utilisation de vue-router, une erreur courante se produit parfois : "Erreur : Redirigé lors du passage de "xxx" à "yyy" via un garde de navigation". Cette erreur rend les débutants très confus. Ainsi, cet article présentera les causes et les solutions de cette erreur.

Cause de l'erreur

Lors de l'utilisation de vue-router, nous utilisons souvent des gardes de routage pour contrôler les autorisations des utilisateurs lors de l'accès à certaines pages. Par exemple, nous pouvons utiliser des gardes de route pour rediriger les utilisateurs vers la page de connexion lorsqu'ils ne sont pas connectés. Cependant, lors de l'utilisation des gardes de route, l'erreur suivante se produit parfois :

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

La raison de cette erreur est que nous avons utilisé la méthode beforeEach() pour rediriger l'utilisateur, mais nous n'avons pas géré correctement la situation de "redirection". Si nous redirigeons l'utilisateur, nous devons alors en informer Vue Router, sinon Vue Router pensera que nous n'avons pas redirigé.

Solution

Pour résoudre cette erreur, nous devons apporter les modifications appropriées à la façon dont les gardes-route sont utilisés. Voici quelques solutions possibles :

1. Utiliser next(false)

Lorsque nous utilisons next(false), cela signifie que nous voulons terminer l'itinéraire sans aucune redirection. Donc, si nous utilisons next(false) dans beforeEach(), nous pouvons éviter cette erreur.

Par exemple, nous pouvons modifier le garde-route comme ceci :

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

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

Lorsque nous utilisons next({ path: '/login' }), cela signifie nous voulons rediriger l'utilisateur vers le chemin spécifié (/login dans ce cas). De cette façon, Vue Router sait que nous avons redirigé.

Par exemple, nous pouvons modifier le garde-route comme ceci :

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

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

Quand nous utilisons next({ name: 'login' }), cela signifie que nous souhaitez que l'utilisateur soit redirigé vers l'itinéraire portant le nom spécifié. Ce nom est le nom de la route définie dans Vue Router.

Par exemple, nous pouvons définir une route avec le nom « login » comme ceci :

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

Ensuite, nous pouvons modifier le garde-route comme ceci :

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

Résumé

Lorsque nous utilisons Vue Router, nous devons comprendre comment utiliser des gardes de route, cela nous aide à contrôler les droits d'accès des utilisateurs et à rediriger les utilisateurs vers des pages spécifiées. Cependant, lors de l'utilisation de gardes de route, l'erreur « Erreur : Redirigé lors du passage de « xxx » à « yyy » via un garde de navigation » se produit parfois. À ce stade, nous devons apporter les modifications appropriées à la façon dont le garde de routage est utilisé, par exemple en utilisant next(false), next({ path: '/login' }) ou next({ name: 'login' }) , etc., cette erreur peut donc être évitée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!