J'ai la séquence suivante qui se passe:
Écran principal
Écran de chargement
Écran des résultats
Sur la page d'accueil, lorsque quelqu'un clique sur un bouton, je l'envoie à l'écran de chargement, à travers:
this.$router.push({path: "/loading"});
Et une fois leur tâche terminée, ils sont envoyés à l'écran des résultats via
this.$router.push({path: "/results/xxxx"});
Le problème est, généralement, ils veulent revenir des résultats à l'écran principal, mais quand ils cliquent en arrière, ils sont renvoyés au chargement, ce qui les renvoie aux résultats, donc ils sont coincés dans une boucle infinie et incapables d'aller retour à l'écran principal.
Une idée sur comment réparer ça? J'aimerais idéalement s'il y avait une option comme:
this.$router.push({path: "/loading", addToHistory: false});
ce qui les enverrait sur la route sans l'ajouter à l'histoire.
la source
this.$router.replace({path: "/results/xxxx"})
$router.replace
depuis Loading. Cela me permet maintenant de revenir de Résultats -> Principal, mais je ne peux plus avancer vers les résultats.Réponses:
Il existe un moyen idéal pour gérer cette situation
Vous pouvez utiliser la protection intégrée pour contrôler l'itinéraire au niveau des granules
Apportez les modifications suivantes dans votre code
Dans le composant de l'écran principal
Dans le chargement du composant d'écran
Dans le composant d'écran de résultat
Je viens de créer une application small vue pour reproduire le même problème. Cela fonctionne dans mon local selon votre question. J'espère que cela résoudra également votre problème .
la source
Je suppose que
router.replace
c'est la voie à suivre - mais encore quelques pistes de réflexion (non testées):Fondamentalement, lors du
$router
changement, il rend le composant de chargement jusqu'à ce qu'il émetteload:stop
, puis il rend lerouter-view
la source
Il s'agit d'un appel difficile compte tenu du peu que nous savons sur ce qui se passe dans votre itinéraire de chargement.
Mais...
Je n'ai jamais eu besoin de construire une route de chargement, seulement des composants de chargement qui sont rendus sur plusieurs routes pendant la phase de collecte des données / init.
Un argument pour ne pas avoir de route de chargement serait qu'un utilisateur pourrait potentiellement naviguer directement vers cette URL (accidentellement), puis il semble qu'il n'aurait pas assez de contexte pour savoir où envoyer l'utilisateur ou quelle action prendre. Bien que cela puisse signifier qu'il tombe sur une route d'erreur à ce stade. Dans l'ensemble, ce n'est pas une super expérience.
Un autre est que si vous simplifiez vos itinéraires, la navigation entre les itinéraires devient beaucoup plus simple et se comporte comme prévu / souhaité sans l'utilisation de
$router.replace
.Je comprends que cela ne résout pas la question de la manière que vous posez. Mais je suggère de repenser cette route de chargement.
App
coquille
Page d'accueil
Page de résultats
Composante résultats
Fondamentalement, le même composant de résultats que vous avez déjà, mais si
loading
c'est vrai ou siresults
est nul, comme vous préférez, vous pouvez créer un faux ensemble de données pour itérer et créer des versions squelettes, si vous le souhaitez. Sinon, vous pouvez simplement garder les choses telles que vous les avez.la source
Une autre option consiste à utiliser l' API Historique .
Une fois dans l'écran Résultats, vous pouvez utiliser ReplaceState pour remplacer l'URL dans l'historique du navigateur.
la source
Cela peut être fait avec le
beforeEach
crochet du routeur.Ce que vous devez faire, c'est que vous devez enregistrer une variable globalement ou dans localStorage dans le
loading
composant lorsque les données sont chargées (avant de rediriger vers leresults
composant):Et puis vous devez vérifier cette variable dans le crochet beforeEach et passer au composant correct:
N'oubliez pas non plus de réinitialiser la valeur à false dans votre
main
composant lorsque vous cliquez sur le bouton de requête (avant le routage vers leloading
composant):la source
Votre écran de chargement ne doit pas du tout être contrôlé par vue-router. La meilleure option est d'utiliser un modal / overlay pour votre écran de chargement, contrôlé par javascript. Il y a beaucoup d'exemples pour la vue. Si vous ne trouvez rien, alors vue-bootstrap a quelques exemples faciles à implémenter.
la source