Tlačítko „Zpět“ ve Vue: správná implementace

# Jak správně implementovat tlačítko „Zpět“ ve Vue: technická příručka pro vývojáře

Implementace tlačítka „Zpět“ v aplikacích na Vue.js často působí banálně, ale v praxi vede k vážným problémům s navigací a historií prohlížeče. Mnoho vývojářů chybně používá router.push() místo metod určených pro pohyb v existujícím zásobníku historie. To vytváří duplicitní záznamy, narušuje chování prohlížečového tlačítka „Zpět“ a vytváří nekonečné cykly přechodů. Tento článek nabízí technicky přesnou příručku k správné implementaci tlačítka „Zpět“ s ohledem na hraniční případy a uživatelský zážitek.

Proč router.push() není „zpět"

Metoda router.push() přidává nový záznam do historie prohlížeče. Je určena pro přechod vpřed na novou trasu, i když tato trasa byla dříve navštívena. Na rozdíl od ní metody router.back() a router.go(-1) nevytvářejí nové záznamy – pouze posouvají ukazatel v existujícím zásobníku historie.

Když použijete router.push() pro tlačítko „Zpět“, ve skutečnosti simulujete přechod vpřed a maskujete ho jako návrat. To vede k následující sekvenci:

• Uživatel: Domovská stránka → Seznam zboží → Zboží A
• Stiskne vaše tlačítko „Zpět" s router.push('/list')
• Historie se stane: Domovská stránka → Seznam zboží → Zboží A → Seznam zboží (duplicita)

Nyní, pokud uživatel stiskne tlačítko „Zpět“ v prohlížeči, vrátí se na stránku „Zboží A“, ne na „Domovskou stránku“. Při opakovaném stisku vašeho tlačítka znovu spustí push a cyklus pokračuje.

Hlavní metody navigace ve Vue Router

Vue Router poskytuje tři klíčové metody pro správu historie:

• router.push(location) — přidává nový záznam do historie.
• router.replace(location) — nahrazuje aktuální záznam bez přidání nového.
• router.back() / router.go(-1) — pohyb zpět v existující historii.

Pro tlačítko „Zpět“ v rozhraní je jedině správnou volbou router.back() nebo router.go(-1). Tyto metody plně odpovídají chování prohlížečového tlačítka a nenarušují integritu zásobníku.

Zpracování hraničních případů: když historie není

V praxi uživatelé často přistupují na stránku přímo – přes externí odkaz, obnovení stránky nebo po zavření karty. V takových případech může být zásobník historie prázdný nebo obsahovat pouze jeden záznam. Volání router.back() nevyvolá chybu, ale nic se nestane, což nechá uživatele ve visícím stavu.

Aby se tomu zabránilo, je třeba předvídat záložní trasu (fallbackRoute). Logika by měla kontrolovat možnost návratu a v její absenci přesměrovat na bezpečnou trasu – například na domovskou stránku nebo rodičovskou sekci.

Univerzální komponenta tlačítka „Zpět"

Níže je příklad komponenty připravené pro produkci s podporou všech potřebných scénářů:

<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>

Tato komponenta řeší několik úkolů najednou:

• Podporuje potvrzení před odchodem (např. uložení návrhu)
• Rozlišuje interní a externí přechody podle prefixů URL
• Předvídá fallback trasu
• Umožňuje plně přepsat logiku podle potřeby

Co je důležité

• Nepoužívejte router.push() pro tlačítko „Zpět“ – to porušuje model historie prohlížeče.
• Vždy předvídejte fallback chování pro případ přímého přístupu.
• Kontrolujte kontext přechodu: návrat uvnitř sekce a návrat zvenčí vyžadují jinou logiku.
• Podporujte zrušení přechodu přes asynchronní háky – to je kritické pro formuláře a editory.
• Synchronizujte chování s nativním tlačítkem prohlížeče – uživatel by neměl zaznamenat rozdíl.

— Editorial Team