web-dev-qa-db-fra.com

Comment pousser vers vue-router sans ajouter à l'historique?

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 de 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.

javascriptvue.jsvue-router
12
Click Upvote

Cela peut être fait avec le crochet beforeEach du routeur.

Ce que vous devez faire, c'est que vous devez enregistrer une variable globalement ou dans localStorage dans le composant loading lorsque les données sont chargées (avant de rediriger vers le composant results):

export default {
  name: "results",
  ...
  importantTask() {
    // do the important work...
    localStorage.setItem('DATA_LOADED', JSON.stringify(true));
    this.$router.Push({path: "/results/xxxx"});
  }
}

Et puis vous devez vérifier cette variable dans le crochet beforeEach et passer au composant correct:

// router.js...
router.beforeEach((to, from, next) => {
  const dataLoaded = JSON.parse(localStorage.getItem('DATA_LOADED'));
  if (to.name === "loading" && dataLoaded)
  {
    if (from.name === "results")
    {
      next({ name: "main"} );
    }
    if (from.name === "main")
    {
      next({ name: "results"} );
    }
  }
  next();
});

N'oubliez pas non plus de réinitialiser la valeur à false dans votre composant main lorsque vous cliquez sur le bouton de requête (avant le routage vers le composant loading):

export default {
  name: "main",
  ...
  queryButtonClicked() {
    localStorage.setItem('DATA_LOADED', JSON.stringify(false));
    this.$router.Push({path: "/loading"});
  }
}
0
Yogesh

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, vue-bootstrap a quelques exemples faciles à implémenter.

0
omarjebari