J'ai rencontré l'erreur vue-router « NavigationDuplicate : navigation redondante évitée vers l'emplacement actuel » dans mon application Vue - comment la résoudre ?

J'ai rencontré l'erreur vue-router « NavigationDuplicate : navigation redondante évitée vers l'emplacement actuel » dans l'application Vue - comment la résoudre ?

Vue.js devient de plus en plus populaire dans le développement d'applications frontales en tant que framework JavaScript rapide et flexible. Vue Router est une bibliothèque de codes de Vue.js utilisée pour la gestion du routage. Cependant, rencontrer parfois des erreurs « NavigationDuplicate » dans les applications Vue peut entraîner des difficultés lors de l'utilisation de Vue Router. Cet article explique comment résoudre cette erreur.

Dans Vue Router, lorsque nous basculons plusieurs fois entre le même chemin de routage, nous rencontrerons l'erreur "NavigationDuplicate". Par exemple, si un utilisateur clique plusieurs fois sur le même lien de navigation, il verra cette erreur sur la console.

Le message d'erreur ressemble généralement au suivant :

"NavigationDuplicate : Navigation redondante évitée vers l'emplacement actuel : "/your-route-path"

Ce message d'erreur nous indique que les sauts de routage de page sont effectués plusieurs fois sur la même URL L'adresse n'est pas autorisée. La cause première de ce problème est que Vue Router assure la navigation correcte de l'itinéraire. Si le chemin de l'itinéraire est le même et les paramètres sont les mêmes, cet itinéraire sera considéré comme le même itinéraire. , nous. Nous présenterons plusieurs façons de résoudre l'erreur "NavigationDuplicate"

Méthode 1 : Utiliser la fonction catch

Nous pouvons envelopper une navigation d'itinéraire avec une instruction try-catch pour nous assurer que nous pouvons utiliser la fonction catch pour attraper. cette erreur et la gérer de manière appropriée.

try {
   await this.$router.push(myRoute)
} catch (err) {
   if(err.name !== 'NavigationDuplicated') {
      throw err
   }
}

Dans cet extrait de code, nous utilisons une instruction try-catch pour envelopper le code de navigation vers l'itinéraire. Dans le bloc de code try, nous naviguerons vers l'itinéraire spécifié via $router. push(), ce qui provoquera l'erreur "NavigationDuplicate". Dans le bloc de code catch, nous relancerons cette erreur s'il s'agit d'une erreur "NavigationDuplicate".

Bien sûr, ce n'est qu'une façon de résoudre le problème. , vous devez effectuer l'appel approprié au bon endroit.

Méthode 2 : ignorer les routes en double

Il existe une propriété dans Vue Router appelée "ignoreDuplicates". Si elle est définie sur true, vous pouvez ignorer les routes en double dans Vue.

export default new Router({
   mode: 'history',
   base: process.env.BASE_URL,
   routes,
   ignoreDuplicates: true,
})

Dans cet extrait de code, nous définissons la propriété ignoreDuplicates sur true, ce qui signifie que si le même itinéraire est parcouru à plusieurs reprises, Vue Router l'ignorera

C'est un moyen simple. La solution peut économiser la quantité de code, mais. cette méthode peut entraîner la perte d'itinéraires ou d'autres problèmes, elle doit donc être utilisée avec prudence.

Méthode 3 : Utiliser les hooks Vue Router

Vue Router possède certaines fonctions de hook de cycle de vie qui peuvent être utilisées dans la navigation d'itinéraire. lorsque des changements se produisent. Nous pouvons utiliser ces fonctions de hook pour résoudre l'erreur "NavigationDuplicate"

const router = new VueRouter({
      routes: [],
});

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

Dans cet exemple, nous utilisons la fonction de hook beforeEach lorsque l'URL est la même que l'URL de l'itinéraire actuel. empêcher Vue Router de naviguer vers le nouvel itinéraire. De cette façon, vous pouvez éviter les erreurs NavigationDuplicate.

Il s'agit d'une solution simple et élégante qui peut résoudre efficacement l'erreur "NavigationDuplicate" qui se produit lors du routage.

On peut voir que l'erreur "NavigationDuplicate" de Vue Router peut être l'une des erreurs courantes rencontrées dans le développement d'applications Vue.js. Heureusement, nous pouvons résoudre ce problème de plusieurs manières simples mais efficaces pour offrir une meilleure expérience aux utilisateurs des applications Vue.js.

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!