Comment implémenter la fonction d'enregistrement de saut d'itinéraire avec Vue Router et Vue.js

Le routage est un concept important lors du développement d'applications Web à l'aide de Vue.js. Vue Router est la bibliothèque de routeur officielle pour Vue.js, qui nous permet de contrôler la navigation des applications via des URL. Vue Router fournit un ensemble d'API pour gérer le routage des applications, y compris la navigation, le passage des paramètres, l'état du routage, etc. Mais dans le développement réel, nous avons souvent besoin d'enregistrer les enregistrements de saut de routage de l'utilisateur dans l'application, comme l'enregistrement des pages visitées par l'utilisateur, la position de défilement de l'utilisateur dans la page, etc. Cet article expliquera comment utiliser Vue Router et Vue.js global navigation guard pour implémenter la fonction d'enregistrement de saut d'itinéraire.

1. Utilisez Vue Router pour enregistrer l'historique des sauts de routage

Vue Router fournit un objet d'historique de routage (historique), à ​​travers lequel nous pouvons obtenir l'état de routage actuel et implémenter le routage via des méthodes telles que pousser et remplacer Jump. Nous pouvons enregistrer l'historique des sauts de routage en écoutant les événements de l'objet de routage. Par exemple, nous pouvons enregistrer l'historique des sauts de routage dans la méthode beforeEach de l'objet de routage. L'exemple de code est le suivant :

const router = new VueRouter({
  routes: [
    // 路由定义
  ]
});

router.beforeEach((to, from, next) => {
  // to 和 from 都是路由对象
  // 记录路由跳转历史
  // ...
  next();
});

Dans le code ci-dessus. , la méthode beforeEach est celle fournie par la fonction de garde de navigation de Vue Router Global, qui sera appelée avant les sauts d'itinéraire. Nous pouvons enregistrer l'historique des sauts de routage de l'utilisateur dans cette méthode.Dans l'exemple de code, nous pouvons utiliser les paramètres to et from pour obtenir l'objet de routage actuel et l'objet de routage précédent, puis les enregistrer dans un tableau ou les stocker localement. (Stockage local) pour une requête ultérieure.

2. Utilisez la garde de navigation globale de Vue.js pour enregistrer les sauts d'itinéraire

En plus d'enregistrer l'historique des sauts d'itinéraire dans Vue Router, nous pouvons également utiliser la fonction de garde de navigation globale fournie par Vue.js pour enregistrer les sauts d'itinéraire. Vue.js fournit trois fonctions globales de garde de navigation : beforeEach, beforeResolve et afterEach. Ils sont appelés respectivement avant le saut de route, avant la résolution de la route et après le saut de route. Nous pouvons enregistrer l'historique des sauts d'itinéraire dans ces fonctions de garde de navigation. L'exemple de code est le suivant :

const router = new VueRouter({
  routes: [
    // 路由定义
  ]
});

router.beforeEach((to, from, next) => {
  // 记录路由跳转历史
  // ...
  next();
});

Vue.mixin({
  beforeRouteLeave (to, from, next) {
    // 记录路由跳转历史
    // ...
    next();
  }
});

Dans le code ci-dessus, nous utilisons la méthode Vue.mixin pour ajouter la fonction globale de garde de navigation au composant Vue. Dans la fonction beforeRouteLeave, nous pouvons enregistrer l'historique des sauts d'itinéraire de l'utilisateur. Cette fonction sera appelée lorsque le composant est sur le point de quitter l'itinéraire actuel. Nous pouvons enregistrer l’historique des sauts d’itinéraire dans un tableau ou un stockage local.

Résumé :

Cet article explique comment utiliser Vue Router et Vue.js global navigation guard pour enregistrer l'historique des sauts d'itinéraire de l'utilisateur. Dans le développement réel, nous pouvons choisir la méthode à utiliser pour enregistrer l'historique des sauts de routage en fonction de besoins spécifiques. Par exemple, nous pouvons utiliser Vue Router pour enregistrer l'historique d'accès de l'utilisateur et utiliser la garde de navigation globale Vue.js pour enregistrer les sauts de certains. événements spéciaux. Tournez-vous vers l’histoire. L'historique des sauts d'itinéraire est une exigence courante lors de sa mise en œuvre, vous devez prêter attention aux problèmes de performances et de capacité de stockage.

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!