javascript - Cum pot să mă întorc/revenire-rută în vue-router?


Ok, pentru a explica asta simplu:

Am 3x pagini.

  • Pagina 1 (Acasă)
  • Pagina 2 (Meniu)
  • Pagina 3 (Despre)

Pagina 1 are un-

<router-link to="/menu">

buton care atunci când este apăsat redirecționează către "/menu".

Deocamdată, Pagina 2 (Meniu) are un

<router-link to="/">

buton și când acest buton este apăsat, revine la locația anterioară "/" Pagina 1 (Acasă).

Dar nu vreau să creez un component pentru router pentru fiecare pagină ca să „mă întorc” la pagina anterioară (dacă aș avea 100 de pagini, asta ar putea fi mult de muncă pentru rutare). Există o modalitate de a face asta cu vue-router? similar cu window.history.back()

Sunt curios să văd dacă există o modalitate de a face asta, deoarece nu o pot găsi în documentație.

Răspuns #1

Poți folosi Navigarea Programatică. Pentru a te întoarce, folosești asta:

router.go(n) 

Unde n poate fi pozitiv sau negativ (pentru a te întoarce). Aceasta este aceeași ca history.back(). Deci poți avea elementul tău astfel:

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

Răspunsul #2

Folosește $router.back() direct pentru a te întoarce/re-derula ruta programatic în vue-router. Sau, dacă ești în template-ul componentului, folosește router.back().

Răspunsul #3

Funcționează pentru mine ca un ceas:

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

Apoi, în șablon:

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

Răspunsul #4

A funcționat pentru mine, scurt și practic. (Nuxt.js)

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