Deklarative Router-Verbindung löscht das Modell in der Vue-Komponente nicht mit VueRouter

Question

Entwickeln eines Task-Schedulers Der Pfad '/ task? Id = 10' füllt das Komponentenmodell mit einer asynchronen Antwort mit der Task-Information, die funktioniert.

in der Navigationsleiste ich folgende Router der Verbindung:

<router-link to="/task">New Task</router-link> 

So verwende ich den gleichen Weg und Komponente eine neue Aufgabe für die Erstellung und Bearbeitung von bestehenden in allen basiert, wenn „id“ Parameter vorhanden ist oder nicht.

Das Problem ist, dass, wenn ich im Pfad '/ task? Id = 10' bin und ich einige Modellfelder fülle, dann klicke ich auf den Router-Link zeigt auf '/ task' (keine Parameter) es ändert die URL des Browsers Das Komponentenmodell wird jedoch nicht gelöscht, sodass die Eingabedaten erhalten bleiben.

Wie kann ich die Komponente neu starten/neu laden, wenn sie über einen deklarativen Router-Link gelandet ist?

Answer 1

Sie können eine Eltern-Kind-Komponente erstellen. Die übergeordnete Komponente ist on/task route, child wäre "/ task/10". Mehr, Nested Routes. Außerdem müssen Sie nicht '? Id =', nur/task/10 anhängen.

const router = new VueRouter({ 
    routes: [ 
    { path: '/task', component: Task, 
     children: [ 
     { path: ':id', component: TaskId } 
     ] 
    }] 
}); 

jsfiddle