Wie kann ich auf dem Vue-Router zurück / Route-Back gehen?

Ok, um das einfach zu erklären:

Ich habe 3x Seiten.

• Page 1 (Startseite)
• Seite 2 (Menü)
• Page 3 (Über)

Seite 1 hat a-

<router-link  to="/menu">

Schaltfläche, die beim Klicken Routen zu "/ menu".

Im Moment hat Seite 2 (Menü) eine

<router-link  to="/">

Klicken Sie auf diese Schaltfläche, und wenn Sie auf diese Schaltfläche klicken, wird zum vorherigen Speicherort "/" Page 1 (Home) zurückgekehrt.

Ich möchte jedoch nicht für jede Seite eine Komponente für den Router erstellen, um zur vorherigen Seite zurückzukehren (als ob ich 100 Seiten hätte, könnte dies eine Menge Arbeit bedeuten, die zurückgeleitet wird). Gibt es eine Möglichkeit, dies mit dem Vue-Router zu tun? ähnlich wie window.history.back ()

Neugierig, ob es einen Weg gibt, dies zu tun, da ich ihn in den Dokumenten nicht finden kann.

Danke im Voraus! John

Sie können die programmatische Navigation verwenden . Um zurückzukehren, verwenden Sie Folgendes:

router.go(n) 

Wobei n positiv oder negativ sein kann (um zurück zu gehen). Dies ist dasselbe wie history.back (). Sie können Ihr Element also wie folgt haben:

<a @click="$router.go(-1)">back</a>

Das funktioniert für mich wie eine Uhr:

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

Dann in der Vorlage:

<button 
  type="button"    
  @click="hasHistory() 
    ? $router.go(-1) 
    : $router.push('/')" class="my-5 btn btn-outline-success">&laquo; 
  Back
</button>

Verwenden Sie diese router.back()Option, um auf dem Vue-Router programmatisch zurück / zurück zu gehen.

Wenn Sie verwenden Vuex, können Sie https://github.com/vuejs/vuex-router-sync verwenden

Initialisieren Sie es einfach in Ihrer Hauptdatei mit:

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

Bei jeder Routenänderung wird das Statusobjekt routein aktualisiert Vuex. Sie können als Nächstes erstellen getter, um das fromObjekt im stateRoutenstatus zu verwenden, oder einfach das verwenden (besser ist es, Getter zu verwenden, aber es ist eine andere Geschichte, https://vuex.vuejs.org/en/getters.html ), kurz gesagt, es wäre ( innerhalb der Komponenten Methoden / Werte):

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

Sie können es auch einfach in die <router-link>Komponente einfügen:

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

Wenn Sie also den obigen Code verwenden, wird der Link zum vorherigen Pfad dynamisch generiert.

Eine andere Lösung ist die Verwendung von Vue-Router-Back-Mixin

import BackMixin from `vue-router-back-mixin`

export default {
  ...
  mixins: [BackMixin],
  methods() {
    goBack() {
      this.backMixin_handleBack()
    }
  }
  ...
}