navigation-guards.md

Intercepteurs de navigation

Comme le nom le suggère, l'interception de navigation fournie par vue-router est principalement utilisée pour intercepter la navigation avec des redirections ou des annulations d'accès. Il y a plusieurs hooks disponibles lors du processus de navigation : globaux, par route ou par composant.

Souvenez-vous de cela : le changement de paramètre ou de query ne va pas lancer d'interception d'entrée ou de sortie de navigation. Vous pouvez toujours observer l'objet $route pour réagir à ces changements, ou utiliser la fonction beforeRouteUpdate d'une interception par composant.

Interception globale

Vous pouvez abonner une interception d'entrée en utilisant router.beforeEach :

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

Les interceptions d'entrées globales sont appelées lors de l'ordre de création, chaque fois qu'une navigation est déclenchée. Les interceptions peuvent être résolues de manière asynchrone, et la navigation est considérée comme en attente avant que tous les hooks ne soient résolues.

Chaque fonction d'interception reçoit trois arguments :

• to: Route: L'objet Route cible vers lequel on navigue.

• from: Route: la route courante depuis laquelle nous venons de naviguer.

• next: Function: cette fonction doit être appelée pour résoudre le hook. L'action dépend des arguments fournis à next:

  • next(): se déplacer jusqu'au prochain hook du workflow. S'il ne reste aucun hooks, la navigation est confirmée.

  • next(false): annuler la navigation courante. Si l'URL du navigateur avait changé (manuellement par l'utilisateur ou via le bouton retour du navigateur), il sera remis à sa valeur de route de from.

  • next('/') ou next({ path: '/' }): redirige vers le nouvel URL. La navigation courante va être arrêtée et une nouvelle va se lancer.

  • next(error): (2.4.0+) si l'argument passé à next est une instance de Error, la navigation va s'arrêter et l'erreur sera passée aux fonctions de rappel via router.onError().

Assurez-vous de toujours appeler la fonction next, sinon le hook ne sera jamais résolu.

Résolutions des interceptions globales

Nouveau dans la 2.5.0

Dans la 2.5.0+ vous pouvez abonner une interception globale avec router.beforeResolve. Ceci est similaire a router.beforeEach, mais la différence est qu'elle sera appelée juste après que la navigation soit confirmée, après que toutes les interceptions par composants et les composants de route asynchrone ai été résolus.

Hooks de sortie globaux

Vous pouvez également abonner des hooks de sortie, cependant, à la différence des interceptions, ces hooks ne fournissent pas de fonction next et n'affecte pas la navigation :

router.afterEach((to, from) => {
  // ...
})

Interception par route

Vous pouvez définir la interception beforeEnter directement sur l'objet de configuration d'une route :

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

Ces interceptions ont exactement le même effet que les interceptions globales d'entrée.

Interception par composant

Enfin, vous pouvez directement définir une interception de navigation a l'intérieur du composant lui-même (celui passer à la configuration du routeur) avec les options suivantes :

• beforeRouteEnter
• beforeRouteUpdate (ajouté dans la 2.2+)
• beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // appelée avant que la route vers le composant soit confirmée.
    // cette fonction n'a pas accès à l'instance du composant avec `this`,
    // car le composant n'a pas encore été créé quand cette interception est appelée !
  },
  beforeRouteUpdate (to, from, next) {
    // appelée quand la route qui fait le rendu de ce composant change,
    // mais que ce composant est utilisé de nouveau dans la nouvelle route.
    // Par exemple, pour une route avec le paramètre dynamique `/foo/:id`, quand nous
    // naviguons entre `/foo/1` et `/foo/2`, la même instance du composant `Foo`
    // va être ré-utilisée, et ce hook va être appelé quand cela arrivera.
    // ce hook a accès à l'instance de ce composant via `this`.
  },
  beforeRouteLeave (to, from, next) {
    // appelée quand la route qui fait le rendu de ce composant est sur le point
    // d'être laissée en faveur de la prochaine route.
    // elle a accès à l'instance de ce composant via `this`.
  }
}

L'interception beforeRouteEnter **n'**a PAS accès à this, car l'interception est appelée avant que la navigation soit confirmée, et le nouveau composant entrant n'a même pas encore été crée.

Cependant, vous pouvez accéder à l'instance en passant dans la fonction de rappel next. Cette fonction de rappel va être appelée quand la navigation sera confirmée, et l'instance du composant sera passée à la fonction de rappel en tant qu'argument :

beforeRouteEnter (to, from, next) {
  next(vm => {
    // accèr à l'instance du composant via `vm`
  })
}

Vous pouvez directement accéder à this à l'intérieur de beforeRouteLeave. L'interception de sortie est utilisée pour empêcher l'utilisateur de quitter la route par accident alors qu'il n'a pas sauver ses modifications. La navigation peut être annulée en appelant next(false).

Le flux de résolution de navigation complet

1. La navigation est demandée.
2. Appel de la interception de sortie des composants désactivés (ceux que l'on va quitter).
3. Appel des interceptions globales beforeEach.
4. Appel des interceptions beforeRouteUpdate pour les composants ré-utilisés (2.2+).
5. Appel de beforeEnter dans la configuration de route.
6. Résolution des composants de route asynchrones.
7. Appel de beforeRouteEnter dans les composants activés (ceux où l'on va arriver).
8. Appel des interceptions beforeResolve (2.5+).
9. Confirmation de la navigation.
10. Appel des hooks globaux afterEach.
11. Modification du DOM demandées.
12. Appel des fonctions de rappel passées à next dans l'interception beforeRouteEnter avec l'instance instanciée.