Run-Methode vor der Route

Question

Ich habe ein Login-modal, dass ich aktivieren, indem Sie .is-active darauf setzen. Dafür habe ich eine Methode wie folgt:

, die ich onclick ausführen. Abhängig vom booleschen Wert isActive erhält mein Modal die Klasse .is-active.

Sache, in meinem modal habe ich eine Schaltfläche, die den Benutzer auf eine neue Ansicht, die es macht eine neue Komponente bedeutet, mit diesem Code:

<router-link class="control" @click="toggleModal()" to="/register">

Wie Sie sehen können, ist es Routing zu /register. Bevor ich das mache, muss ich toggleModal() ausführen, damit das Modal geschlossen wird. Im Moment ist es Routing, ohne die Methode auszuführen, was bedeutet, dass die neue Sicht mein modales Overlay hat, das ... nicht optimal ist.

Gibt es einen guten Weg, dies in Vue zu tun? Könnte ich vielleicht eine Methode erstellen, die zuerst toggleModal() aufruft und dann von der Methode routet?

Danke.

Answer 1

Ich würde eine Methode definieren, die toggleModal zuerst aufruft, dann navigiert. Wie so:

methods: { 
    navigateAway() { 
    this.isActive = !this.isActive 
    this.$router.push('/register') 
    } 
} 

Sie brauchen nicht die event Argument, wenn Sie auf die Erfassung von mehr Daten von dem Ereignis oder Ereignisziel beabsichtigen. Sie könnten auch den Router Push in ein setTimeout, wenn Sie dies wünschen, für vielleicht sauberere Ansicht Änderungen einpacken.

methods: { 
    navigateAway() { 
    let vm = this 
    vm.isActive = !vm.isActive 
    setTimeout(function() { 
     vm.$router.push('/register') 
    }, 50) 
    } 
} 

---

Natürlich gibt es Haken, die Sie von vue-router verwenden können, die dies einfach zu machen. Beispiel (vorausgesetzt, Sie einzelne Dateikomponenten und Vue.js 2.x verwenden):

export default { 
    data() { 
    return { 
     isActive: false 
    } 
    }, 
    beforeRouteLeave (to, from, next) { 
    this.isActive = false // I assume that you would not want to leave it open upon navigating away 
    next() 
    } 
} 

Link zu vue Router Haken: https://router.vuejs.org/en/advanced/navigation-guards.html