Best Practice für das Reagieren auf Parameteränderungen mit dem Vue-Router

Question

Wenn Sie einen Vue-Router mit Routen wie /foo/:val verwenden, müssen Sie einen Beobachter zu react for parameter changes hinzufügen. Das führt zu etwas lästigem doppelten Code in allen Ansichten, die Parameter in der URL enthalten. Dies könnte wie das folgende Beispiel aussehen

:

export default { 
    // [...] 
    created() { 
     doSomething.call(this); 
    }, 
    watch: { 
     '$route'() { 
      doSomething.call(this); 
     } 
    }, 
} 

function doSomething() { 
    // e.g. request API, assign view properties, ... 
} 

Gibt es eine andere Möglichkeit, dies zu überwinden? Können die Handler für created und $route Änderungen kombiniert werden? Kann die Wiederverwendung der Komponente deaktiviert werden, so dass der Beobachter überhaupt nicht benötigt wird? Ich benutze Vue 2, aber das könnte auch für Vue 1 interessant sein.

Answer 1

Eine mögliche Antwort, die ich gerade dank einer GitHub issue gefunden habe, ist die folgende.

Es ist möglich, das key attribute zu verwenden, das auch für v-for verwendet wird, damit Vue Änderungen in der Ansicht verfolgen kann. Um das zu umgehen, müssen Sie das Attribut auf das router-view Element hinzufügen:

<router-view :key="$route.fullPath"></router-view> 

Nachdem Sie dies zur Ansicht hinzufügen möchten, müssen Sie nicht die $route mehr zu beobachten. Stattdessen erstellt Vue.js eine vollständig neue Instanz der Komponente und ruft auch den Rückruf created auf.

Dies ist jedoch eine Alles-oder-Nichts-Lösung. Es scheint gut zu funktionieren mit der kleinen Anwendung, die ich gerade entwickle. Es kann jedoch Auswirkungen auf die Leistung in einer anderen Anwendung haben. Wenn Sie die Wiederverwendung der Ansicht nur für bestimmte Routen wirklich deaktivieren möchten, können Sie sich den Wert keybased on the route ansehen. Aber ich mag diesen Ansatz nicht wirklich.