Pourquoi utiliser beforeRouteEnter au lieu de mounted ?

Question

Pourquoi le beforeRouteEnter la garde de navigation existe dans vue-router ? Y a-t-il des cas où beforeRouteEnter sera tiré, mais mounted ne le sera pas ? Si ce n'est pas le cas, dans quel cas préféreriez-vous utiliser beforeRouteEnter a mounted ?

Answer 1

El mounted est un hook de cycle de vie de n'importe quel composant Vue, il sera toujours déclenché. L'idée de beforeRouteEnter ou tout autre crochet de cycle de vie ajouté par l'utilisateur. vue-router est de vous permettre de contrôler votre application.

Par exemple, disons que vous avez une route appelée bar qui a une logique de validation très spécifique qui ne permet à l'utilisateur d'y entrer que si la route précédente était foo vous pouvez insérer cette logique de validation dans ce crochet au lieu de vérifier chaque changement de route dans la garde globale.

export default {
  name: 'Bar',
  beforeRouteEnter(to, from, next) {
    if (from.name === 'foo') {
      next(); // Calling next allow the route to proceed
    } else {
      next(false); // Don't allow the navigation
      // or
      next({
        name: 'foo',
        query: {
          from: 'bar'
        }
      }); // Redirect to any desired route as navigation made in $router
    }
  }
}