Wie kann ich initialisieren erneut gleichen Komponenten in verschiedenen Routen

Question

Szenario:

Ich habe einen mehrstufigen Form, wenn der Benutzer auf die nächste Schaltfläche klickt, das einzige, was in der Route ändert, ist die id z.B. Form /step/:id, aber wenn ich Schritte/Routen habe, die die gleichen Komponenten wie die vorherige enthält, ruft es nur die 'created' Methode der Komponenten des ersten, es ruft nicht auf dem nächsten.

Gibt es eine Möglichkeit, die Komponenten jedes Mal neu zu erstellen/initialisieren, wenn ich Routen ändere?

Answer 1

Sie können einen Blick auf „Als Reaktion auf Params Changes“ in docs

Eine Sache zu beachten, wenn Routen mit params ist, dass, wenn der Benutzer navigiert von/user/foo/user/bar Die gleiche Komponenteninstanz wird wiederverwendet. Da beide Routen die gleiche Komponente darstellen, ist dies effizienter, als die alte Instanz zu zerstören und dann eine neue zu erstellen. Dies bedeutet jedoch auch, dass die Lebenszyklus-Hooks der Komponente nicht aufgerufen werden.

reagieren Veränderungen in der gleichen Komponente params, können Sie einfach das Objekt $ route sehen:

watch: { 
    '$route' (to, from) { 
     //update the variables with new route params 
    } 
    }, 

Sie können auch einen Blick auf meine ähnliche Antwort here haben.

Answer 2

Ich habe ein weiteres Problem angetroffen. Immer wenn sich meine Routenparameter ändern, werden die Requisiten, die ich an diese Komponente übergeben habe, nicht aktualisiert.

Bei der ersten Ladung wird der Prop Wert aktualisiert, aber wenn ich zum nächsten Schritt/Route gehe, wird die $route aktualisiert und auch die Methode in der Uhr wird ausgeführt, aber der Wert der Prop, die übergeben wird das gleiche wie der Wert des ersten Schritts/Route. Wenn ich dann erneut zum nächsten Schritt/zur nächsten Route gehe, ist der Wert der Komponente des dritten Schritts/der dritten Route vermutlich der Wert der Komponente des zweiten Schritts/der zweiten Route. Scheint so, als ob der Wert der Requisiten 1 Schritt hinter der eigentlichen Route liegt.

Hier ist, wie ich die Stütze übergeben:

<el-repeater :element.sync="element"></el-repeater> 

bearbeiten: Aber alle Daten, die in der Benutzeroberfläche zu sehen sind aktualisiert und korrekt ist, und sind auf der Stütze der Grundlage dieser Daten, die hat wurde bestanden.