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

72

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

— John107
quelle

2

router.go (n) | Programmatische Navigation | vue-router

— yuriy636

@ yuriy636 ist wahrscheinlich die beste Antwort. Derzeit haben wir eine äußere Komponente mit der Schaltfläche "Zurück", die die Zeichenfolgenmanipulation für die aktuelle URL verwendet, um zur letzten Seite der Route zurückzukehren. Wir werden wahrscheinlich auf die router.go-Methode umsteigen, wenn wir jetzt die Chance haben

— Kartik Prasad

OK danke! Es starrte mich direkt ins Gesicht! Ich bin mir allerdings nicht sicher, wie ich das in meine Syntax schreiben soll. Es tut uns leid! Ich bin neu in diesem Bereich!

— John 107

195

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>

— José Fernando Davila
quelle

Hat jemand ein Problem damit auf IE11? Wenn ich beispielsweise eine Seite über einen Router-Link öffne, klicke auf meine Schaltfläche, sie geht zurück. Wenn ich jedoch dieselbe Seite über einen Router-Link öffne, wird router.go(-1)meine URL gelöscht, aber es passiert nichts.

— PanPipes

Ich möchte zur vorherigen Seite zurückkehren, wenn beim Laden keine ID vorhanden ist. Dies funktioniert, aber bei der Seitenaktualisierung .go (-1) geht 2 Seiten zurück und nicht 1 Seite.

— Aravindh Gopi

Noob Frage, ist es in Ordnung, dass wir hier aTag anstelle von Router-Link verwenden

— Hego555

1

@ Hego555 Ich glaube, Router-Link ist eine Komponente, die astandardmäßig ein Tag rendert

— Steven Soroka

Dies scheint alle URL-Parameter zu ignorieren, die in der vorherigen URL enthalten waren, zu der Sie zurückkehren

— Titan

13

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>

— yeikiu
quelle

1

Wenn Sie von einer anderen Website außerhalb Ihrer App kommen, denken Sie, dass Sie zu einer vorherigen Seite Ihrer App zurückkehren können, diese aber tatsächlich für eine externe Website belassen würden.

— Enric A.

9

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

— Abhishek Singh
quelle

7

Es ist$router.back()

— Aspirinemaga

6

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.

— ojczeo
quelle

4

Dies verursacht ein Endlosschleifenproblem

— TonyGW

@ TonyGW Nein, tut es nicht.

— Pishpish

-3

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()
    }
  }
  ...
}

— ittus
quelle