wake-up-neo.net

Unterschied zwischen beforeRouteUpdate und "$ route" - Vue.js?

Wie wir wissen, verwenden wir beforeRouteUpdate hook oder beobachten $route, um auf Änderungen der Parameter in derselben Komponente zu reagieren.

$ Route beobachten:

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // react to route changes...
    }
  }
}

beforeRouteUpdate-Methode:

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    next()
  }
}

Was ist der Unterschied zwischen diesen beiden? wenn beide gleich sind, warum hat vue router beforeRouteUpdate eingeführt?

10
Mukund Kumar

Aus der Dokumentation on beforeRouteUpdate:

wird aufgerufen, wenn die Route, die diese Komponente darstellt, geändert wurde, diese Komponente jedoch in der neuen Route wiederverwendet wird. Wenn Sie beispielsweise bei einer Route mit dynamischen Parametern /foo/:id zwischen /foo/1 und /foo/2 navigieren, wird dieselbe Foo-Komponenteninstanz wiederverwendet. In diesem Fall wird dieser Hook aufgerufen.

Die Dokumentation ist zugegebenermaßen unklar, dass der Hook before genannt wird und der Wert des $route-Objekts tatsächlich geändert wird. Das ist der Unterschied zwischen diesem Navigations-Hook und dem Setzen eines Watchers auf $route, der after aufgerufen wird, der Wert von $route hat sich geändert. 

Mit dem beforeRouteUpdate-Navigationswächter können Sie festlegen, ob Sie verhindern möchten, dass sich die Route ändert (indem Sie next() nicht aufrufen) oder ganz zu einer anderen Route wechseln (durch Übergeben eines anderen Routenwerts wie next('/foo'), next({ name: 'foo' }) usw.).

Hier ist ein Beispiel Geige , das zeigt, wann diese Funktionen aufgerufen werden.

10
thanksd

Wie @thanksd sagte, beforeRouteUpdate ist wie eine Wache. Beim Anschauen können Sie nicht verhindern, dass die Route aktiv wird. Mit beforeRouteUpdate können Sie dies mit der next-Funktion tun. Sie können beispielsweise warten, bis Ihre Daten abgerufen werden, und fahren Sie dann mit der Komponente fort.

Weitere Informationen finden Sie in der vue-router-Dokumentation Data Fetching .

0
zoli