web-dev-qa-db-fra.com

Comment puis-je revenir/retourner sur vue-router?

Ok, pour expliquer cela simplement:

J'ai 3x pages.

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

La page 1 a a- 

<router-link  to="/menu">

bouton qui clique sur les routes vers "/ menu".

Pour le moment, la page 2 (Menu) a un 

<router-link  to="/">

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

Mais je ne veux pas créer un composant pour routeur pour chaque page afin de «revenir» à la page précédente (comme si j'avais 100 pages, cela pourrait représenter beaucoup de travail d'acheminement). Y a-t-il un moyen de faire cela avec vue-router? semblable à window.history.back ()

Curieux de voir s’il existe un moyen de le faire car je ne le trouve pas dans la documentation.

Merci d'avance! John

javascriptwebpackvue.jsvuejs2vue-router
23
John107

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). Ceci est identique à history.back (). Vous pouvez donc avoir votre élément comme ceci:

<a @click="$router.go(-1)">back</a>
63
José Fernando Davila

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

Il 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 route dans Vuex. Vous pouvez ensuite créer getter pour utiliser l'objet from dans l'état de la route ou simplement utiliser state (mieux vaut utiliser des accesseurs, mais c'est une autre histoire https: //vuex.vuejs.org/fr/getters.html ), En bref, ce serait (à l'intérieur des composants méthodes/valeurs):

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

Vous pouvez aussi simplement le placer dans le composant <router-link>:

<router-link :to="{ path: $store.state.route.from.fullPath }"> 
  Back 
</router-link>

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

1
ojczeo