Le problème selon lequel beforeRouteLeave ne peut pas être déclenché lorsque le navigateur revient en arrière lors de l'utilisation de Vue

Cet article présente principalement la solution au problème que le navigateur Vue ne peut pas déclencher avantRouteLeave lors d'une sauvegarde. Les amis dans le besoin peuvent se référer au

phénomène

Lors du chargement du premier composant (le premier ici signifie le premier dans l'historique du navigateur, appelé plus tard le composant à écouter), beforeRouteLeave peut être déclenché par un saut normal vers d'autres pages. Cependant, cet événement ne peut pas être écouté en appuyant sur le bouton retour du navigateur.

Solution

Actuellement, une solution grossière et peu pratique est adoptée. Ajoutez une couche de composants, puis router.push au composant à surveiller, afin que le composant à surveiller ne soit pas le premier composant et puisse écouter l'événement beforeRouteLeave normalement.

Remarque :

En raison de la perturbation du routage d'origine. Vous devez ajouter une surveillance globale des itinéraires dans main.js

router.beforeEach((to, from, next) => {
 if (to is '用于跳转的组件' && from is '待监听组件') {
  router.go(-1) 
  next(false)
 } else {
  next()
 }
 // 这样当从一个普通页面A进入待监听组件时，在待监听组件中按返回键时能正常进入A
})

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Astuces liées à JavaScript

Implémentation de fichiers importés dynamiquement dans webpack

Comment implémenter une barre de progression circulaire dans le mini programme WeChat

Comment utiliser l'icône de police iconfont dans le webpack

dans le webpack Comment empaqueter fichiers JS spécifiés séparément

Implémenter le composant de sélection de date dans le terminal mobile vue

Utiliser le nœud pour implémenter le débogage intégré

Fichier packagé par React Webpack (tutoriel détaillé)

6 types d'expressions régulières en JavaScript (tutoriel détaillé)

Comment remplir l'avatar par défaut en javascript

Utilisez webpack pour gérer le problème des fichiers bundle.js trop volumineux

Utilisez node.js Implémenter la fonction de récupération automatique des enveloppes rouges sur Douyin

Comment configurer le fichier de configuration Babel dans vue-cli

Comment utiliser l'installation et la configuration de Babel tutoriel

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!