web-dev-qa-db-fra.com

Différence entre beforeRouteUpdate et regarder '$ route' - Vue.js?

Comme nous le savons, pour réagir aux changements de paramètres dans le même composant, nous utilisons beforeRouteUpdate hook ou observons $route.

regarder $ route: 

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

beforeRouteUpdate Méthode: 

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

Quelle est la différence entre ces deux? si les deux sont identiques, alors pourquoi le routeur vue introduit-t-il beforeRouteUpdate?

vue.jsvuejs2vue-router
10
Mukund Kumar

Dans la documentation on beforeRouteUpdate:

appelé lorsque la route qui restitue ce composant a changé, mais que ce composant est réutilisé dans la nouvelle route. Par exemple, pour une route avec des paramètres dynamiques /foo/:id, lorsque nous naviguons entre /foo/1 et /foo/2, la même instance de composant Foo sera réutilisée et ce hook sera appelé à ce moment-là.

Certes, la documentation n’est pas claire sur le fait que le hook s'appelle before la valeur de l’objet $route change réellement. C'est la différence entre ce crochet de navigation et la configuration d'un observateur sur $route, qui sera appelé après, la valeur de $route a changé. 

En utilisant la garde de navigation beforeRouteUpdate, vous pouvez déterminer si vous souhaitez ou non empêcher le changement de route (en n'appelant pas next()) ou accéder entièrement à un autre itinéraire (en transmettant une valeur de route différente comme next('/foo'), next({ name: 'foo' }), etc.).

Voici un exemple fiddle qui montre quand ces fonctions sont appelées.

10
thanksd

Comme @thanksd l'a dit, beforeRouteUpdate est comme un garde. En regardant, vous ne pouvez pas empêcher la route d’agir, mais avec beforeRouteUpdate vous pouvez le faire avec la fonction next. Par exemple, vous pouvez attendre jusqu'à ce que vos données soient récupérées, puis passez au composant.

Vous trouverez plus d'informations dans la documentation de vue-router Récupération de données .

0
zoli