Comment implémenter l'historique d'annulation de saut dans Vue Router

Vue est un framework JavaScript populaire largement utilisé dans le développement d'applications Web. Vue Router est la bibliothèque de routeur officielle pour Vue et est très utile lors de la création d'applications d'une seule page. Vue Router permet aux développeurs de gérer plus facilement l'état et la navigation des applications. Vue Router fournit également des fonctionnalités telles que le routage dynamique et le routage imbriqué pour aider les développeurs à mieux gérer la base de code.

Lors de l'utilisation de Vue Router, une exigence très courante consiste à implémenter des sauts de page dans des scénarios tels que les sites Web de commerce électronique. Dans ce cas, après que l'utilisateur a effectué certaines opérations, il passe à une autre page. Mais cette méthode de saut peut causer des problèmes aux utilisateurs. Par exemple, lorsque l'utilisateur revient à la page précédente, les produits cliqués seront rechargés. Cela peut entraîner de la confusion et de la gêne pour les utilisateurs. Par conséquent, annuler l’historique des sauts est une bonne solution.

Alors, comment implémenter l'historique d'annulation de saut dans Vue Router ? Ci-dessous, nous proposerons quelques solutions.

Méthode 1 : utiliser la méthode de remplacement de Vue Router

Vue Router permet aux développeurs d'utiliser la méthode de remplacement au lieu de la méthode push par défaut pour modifier les itinéraires. Cette méthode peut être utilisée pour annuler l'historique.

Voici un exemple :

router.replace('/path-to-url');

Cette méthode remplacera l'itinéraire actuel par le chemin donné sans créer une nouvelle entrée dans l'historique du navigateur. Cela signifie que les utilisateurs ne peuvent pas revenir à la page précédente, résolvant ainsi le problème du rechargement de la page lors du retour.

Méthode 2 : utiliser les méthodes beforeRouteLeave et scrollBehavior de Vue Router

Vue Router fournit deux méthodes beforeRouteLeave et scrollBehavior, qui peuvent être utilisées en combinaison pour implémenter l'historique d'annulation.

La méthode beforeRouteLeave est un hook de cycle de vie dans Vue Router, qui est déclenché lorsque le composant quitte la route. Par conséquent, il peut être utilisé pour remplacer le comportement de routage par défaut. Dans la méthode beforeRouteLeave, vous pouvez utiliser la méthode scrollBehavior pour définir si le navigateur peut revenir en mode historique via l'objet scrollBehavior. Si la propriété 'scrollBehavior' est définie dans l'objet renvoyé dans la méthode scrollBehavior, le comportement de défilement correspondant sera effectué lorsque vous cliquerez sur le bouton Précédent du navigateur en mode historique.

Voici un exemple :

beforeRouteLeave(to, from, next) {
  this.$router.replace(to.path)
  next(false);
},
scrollBehavior(to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

Dans cet exemple, nous utilisons la méthode beforeRouteLeave pour remplacer le comportement de routage par défaut et utilisons la méthode this.$router.replace pour remplacer la méthode push par défaut. Cette alternative n'ajoute pas de nouvelles entrées à l'historique, empêchant ainsi le rechargement de la page lorsque l'utilisateur recule. La méthode scrollBehavior est utilisée pour définir si le navigateur peut revenir en arrière.

Méthode 3 : Utiliser le mode historique de Vue Router

Vue Router propose également un mode historique, qui peut être utilisé pour annuler l'historique.

Voici un exemple :

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

Dans cet exemple, nous définissons le mode de Vue Router sur historique. Ce mode est basé sur l'API d'historique HTML5, qui stocke les informations de routage dans l'objet historique du navigateur plutôt que dans la chaîne de requête de la barre d'adresse. Cela signifie qu'en mode historique, les utilisateurs peuvent saisir et modifier les URL directement dans la barre d'adresse sans se soucier des problèmes d'historique.

Résumé

Vue Router est la bibliothèque de routeurs officiellement fournie par Vue, qui fournit des fonctions très utiles. Lorsqu'il s'agit de mettre en œuvre des sauts de page, l'annulation de l'historique des sauts est une exigence très importante. Dans cet article, nous présentons trois façons d'annuler l'historique des sauts. Grâce à ces méthodes, les développeurs peuvent mieux gérer l'état et la navigation des applications et améliorer l'expérience utilisateur.

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!