Zurück-Button in Vue: Korrekte Implementierung

Wie man den „Zurück“-Button in Vue richtig implementiert: Ein technischer Leitfaden für Entwickler

Die Implementierung des „Zurück“-Buttons in Vue.js-Anwendungen wirkt oft unkompliziert, führt aber in der Praxis zu ernsten Problemen bei der Navigation und im Browser-Verlauf. Viele Entwickler greifen irrtümlicherweise zu router.push() anstelle von Methoden, die für die Bewegung durch den bestehenden Verlaufsstapel konzipiert sind. Dadurch entstehen doppelte Einträge, das Verhalten des Browser-„Zurück“-Buttons wird gestört und es bilden sich unendliche Übergangsschleifen. Dieser Artikel liefert einen technisch präzisen Leitfaden zur korrekten Umsetzung des „Zurück“-Buttons, der Randfälle und die Benutzererfahrung berücksichtigt.

Warum router.push() kein „Zurück“ ist

Die Methode router.push() fügt einen neuen Eintrag zum Browser-Verlauf hinzu. Sie ist für die Navigation vorwärts zu einer neuen Route gedacht, auch wenn diese Route zuvor besucht wurde. Im Gegensatz dazu erzeugen router.back() und router.go(-1) keine neuen Einträge – sie verschieben lediglich den Zeiger durch den bestehenden Verlaufsstapel.

Verwenden Sie router.push() für den „Zurück“-Button, simulieren Sie tatsächlich eine Vorwärtsnavigation, die als Rückkehr getarnt ist. Das führt zu folgender Abfolge:

• Benutzer: Home → Produktliste → Produkt A
• Klickt auf Ihren „Zurück“-Button mit router.push('/list')
• Verlauf wird: Home → Produktliste → Produkt A → Produktliste (Duplikat)

Drückt der Benutzer nun auf den Browser-„Zurück“-Button, landet er auf der 'Product A'-Seite statt auf 'Home'. Ein weiterer Klick auf Ihren Button löst erneut einen push aus und der Kreislauf geht weiter.

Wichtige Navigationsmethoden in Vue Router

Vue Router stellt drei zentrale Methoden zur Verlaufsverwaltung bereit:

• router.push(location) — fügt einen neuen Eintrag zum Verlauf hinzu.
• router.replace(location) — ersetzt den aktuellen Eintrag, ohne einen neuen hinzuzufügen.
• router.back() / router.go(-1) — navigiert rückwärts durch den bestehenden Verlauf.

Für den „Zurück“-Button in der Benutzeroberfläche ist die einzig richtige Wahl router.back() oder router.go(-1). Sie entsprechen vollständig dem Verhalten des Browser-Buttons und verletzen die Integrität des Stapels nicht.

Umgang mit Randfällen: Wenn kein Verlauf vorhanden ist

In der Praxis gelangen Benutzer oft direkt auf eine Seite – über einen externen Link, Seitenaktualisierung oder nach Schließen eines Tabs. In solchen Fällen kann der Verlaufsstapel leer sein oder nur einen Eintrag enthalten. Ein Aufruf von router.back() wirft keinen Fehler, aber es passiert nichts, und der Benutzer bleibt hängen.

Um das zu vermeiden, legen Sie eine Fallback-Route (fallbackRoute) fest. Die Logik prüft, ob eine Rückwärtsnavigation möglich ist, und leitet bei Bedarf zu einer sicheren Route um – etwa zur Startseite oder zum übergeordneten Abschnitt.

Universelle „Zurück“-Button-Komponente

Hier ist eine produktionsreife Komponente, die alle relevanten Szenarien abdeckt:

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter, useRoute, type RouteLocationRaw } from 'vue-router'

const props = defineProps<{
  fallbackRoute?: RouteLocationRaw
  beforeNavigate?: () => boolean | Promise<boolean>
  beforeRouterPush?: () => void
}>()

const router = useRouter()
const route = useRoute()

const isSamePage = computed<boolean>(() => {
  const fromRoute = router.options.history.state?.back

  if (!fromRoute || typeof fromRoute !== 'string') return false

  const currentPrefix = route.path.split('/')[1]
  const fromPrefix = fromRoute.split('/')[1]

  return currentPrefix === fromPrefix
})

const goBack = async () => {
  if (props.beforeNavigate) {
    const shouldProceed = await props.beforeNavigate()
    if (!shouldProceed) return
  }

  if (props.beforeRouterPush) {
    props.beforeRouterPush()
    return
  }

  if (isSamePage.value) {
    router.back()
  } else if (props.fallbackRoute) {
    void router.push(props.fallbackRoute)
  } else {
    void router.push({ name: 'home' })
  }
}
</script>

<template>
  <q-btn
    icon="arrow_back"
    @click="goBack"
    aria-label="Onzad"
  />
</template>

Diese Komponente löst mehrere Aufgaben gleichzeitig:

• Unterstützt Bestätigungen vor dem Verlassen (z. B. Speichern eines Entwurfs)
• Unterscheidet interne und externe Übergänge anhand von URL-Präfixen
• Bietet eine Fallback-Route
• Erlaubt eine vollständige Überschreibung der Logik bei Bedarf

Wichtige Punkte

• Verwenden Sie nicht router.push() für den „Zurück“-Button – es verstößt gegen das Browser-Verlaufsmodell.
• Stellen Sie immer ein Fallback-Verhalten für direkte Zugriffe bereit.
• Prüfen Sie den Übergangskontext: Rückkehr innerhalb eines Abschnitts und von außen erfordern unterschiedliche Logik.
• Unterstützen Sie das Abbrechen der Navigation über asynchrone Hooks – entscheidend für Formulare und Editoren.
• Synchronisieren Sie das Verhalten mit dem nativen Browser-„Zurück“-Button – der Benutzer darf keinen Unterschied bemerken.

— Editorial Team