Comment résoudre le problème de « NavigationDuplicate : navigation redondante évitée vers l'emplacement actuel » lors de l'utilisation de vue-router dans une application Vue ?

Vue.js est un framework JavaScript populaire. Il fournit de nombreuses fonctionnalités et outils pour créer des applications Web d’une seule page. Vue-router est un outil de gestion de routage couramment utilisé dans Vue.js. Cela nous aide à implémenter le routage dans les applications à page unique (SPA).

Cependant, lorsque vous utilisez vue-router, vous pouvez rencontrer l'erreur "NavigationDuplicate: Navigation redondante évitée vers l'emplacement actuel". Ce problème se produit généralement lorsque l'utilisateur clique à plusieurs reprises sur le chemin de routage. Dans ce cas, vue-router demandera « Éviter les accès répétés à l'emplacement actuel ».

Pourquoi cette erreur se produit-elle ? En effet, vue-router détecte que les utilisateurs accèdent à plusieurs reprises à la même adresse, ce qui peut entraîner des problèmes lors du chargement des composants de la page. Par conséquent, le garde de navigation dans vue-router arrêtera le chargement de la page pour éviter une navigation répétée.

Alors, comment résoudre ce problème ?

1. Désactivez le garde de navigation

La première méthode consiste à désactiver le garde de navigation dans vue-router. Cette approche peut perturber la façon dont nous gérons les itinéraires, car les gardes de navigation sont une fonctionnalité très puissante qui peut nous aider à basculer entre différents itinéraires et à gérer l'état des itinéraires, les autorisations, etc. Cependant, dans certains scénarios, la désactivation des gardes de navigation peut être un moyen efficace de résoudre le problème.

Pour désactiver les gardes de navigation, il suffit de les supprimer dans la configuration du routage :

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 }
  }
})

Deuxième solution

Deuxième L'approche est de résoudre ce problème problème tout en conservant la fonctionnalité de la garde de navigation. Il existe deux solutions :

1. Utiliser la méthode catch

la méthode catch est une méthode fournie par vue-router Lors de l'exécution du garde de navigation, si une erreur survient. , La méthode catch sera appelée. Nous pouvons renvoyer une valeur fausse dans la méthode catch pour éviter de revenir à la page actuelle.

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

De cette façon, nous pouvons éviter une navigation répétée si l'utilisateur visite la même adresse à plusieurs reprises.

2. Utilisez la méthode de remplacement

La méthode de remplacement est une meilleure solution. Cette méthode peut rediriger vers la même adresse sans déclencher le garde de navigation. Il suffit d'utiliser la méthode de remplacement dans la méthode de saut de l'itinéraire pour éviter une navigation répétée.

this.$router.replace(to)

De cette façon, chaque fois que l'utilisateur clique pour accéder au même itinéraire, l'itinéraire actuel sera remplacé par un nouvel itinéraire sans charger de composants en double. Cela évite les problèmes avec les gardes de navigation.

Il est très courant que l'erreur "NavigationDuplicate: Navigation redondante évitée vers l'emplacement actuel" se produise lors de l'utilisation de vue-router dans une application Vue. Nous pouvons choisir de désactiver les gardes de navigation, d'utiliser la méthode catch ou d'utiliser la méthode replace pour résoudre ce problème en fonction de nos besoins.

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!