Comment puis-je revenir en arrière sur vue-router ?

Question

D'accord, pour expliquer cela simplement :

J'ai 3x pages.

• Page 1 (Accueil)
• Page 2 (Menu)
• Page 3 (À propos)

La page 1 a un-

bouton qui, lorsqu'il est cliqué, routera vers "/menu".

Pour l'instant, la Page 2 (Menu) a un

bouton et lorsque ce bouton est cliqué, il revient à l'emplacement précédent "/" Page 1 (Accueil).

Mais je ne veux pas créer un composant pour le routeur pour chaque page pour 'revenir' à la page précédente (car si j'avais 100 pages cela pourrait nécessiter beaucoup de travail pour revenir en arrière). Y a-t-il un moyen de le faire avec vue-router ? similaire à window.history.back()

Je suis curieux de voir s'il y a un moyen de le faire car je ne le trouve pas dans la documentation.

Answer 1

Vous pouvez utiliser navigation programmatique. Pour revenir en arrière, vous utilisez ceci :

router.go(n) 

Où n peut être positif ou négatif (pour revenir en arrière). C'est la même chose que history.back(). Ainsi, vous pouvez avoir votre élément comme ceci :

retour

Answer 2

Utilisez $router.back() directement pour revenir/retourner de manière programmatique sur vue-router. Ou si vous êtes dans le template du composant, utilisez router.back().

Answer 3

Cela fonctionne comme une horloge pour moi :

methods: {
 hasHistory () { return window.history.length > 2 }
}

Ensuite, dans le modèle :

« 
  Retour

Answer 4

Si vous utilisez Vuex vous pouvez utiliser https://github.com/vuejs/vuex-router-sync

Il vous suffit de l'initialiser dans votre fichier principal avec :

import VuexRouterSync from 'vuex-router-sync';
VuexRouterSync.sync(store, router);

Chaque changement de route mettra à jour l'objet d'état route dans Vuex. Vous pouvez ensuite créer un getter pour utiliser l'objet from dans l'état de la route ou simplement utiliser l'state (il est préférable d'utiliser les getters, mais c'est une autre histoire https://vuex.vuejs.org/en/getters.html), donc en bref cela donnerait (à l'intérieur des méthodes/valeurs des composants) :

this.$store.state.route.from.fullPath

Vous pouvez également le placer simplement dans le composant :

  Retour 

Ainsi, lorsque vous utilisez le code ci-dessus, le lien vers le chemin précédent sera généré dynamiquement.

Answer 5

Cette réponse à cette question devient beaucoup plus difficile si vous codez une application mobile car vous avez maintenant besoin d'une solution intégrée qui prend en compte l'historique de navigation à partir soit de votre bouton de retour UI, SOIT du bouton "retour" fourni par le dispositif mobile !

Des frameworks comme Ionic et Quasar peuvent intercepter les événements du bouton de retour sur les dispositifs mobiles. Quasar gère ces événements pour vous et adapte le comportement pour les builds de plateforme de bureau et mobiles, de sorte que par exemple un build d'application mobile Cordova/Capacitor garantira qu'une action de "retour" peut intelligemment fermer une boîte de dialogue, revenir en arrière d'une page ou même fermer l'application !

• Gestionnaire d'événements de retour Quasar et directive v-go-back

  • https://quasar.dev/vue-directives/go-back

• Ionic - Bouton de retour et bouton de retour matériel

  • https://ionicframework.com/docs/api/back-button
  • https://ionicframework.com/docs/developing/hardware-back-button