Que sont les gardes de navigation de Vue ?

Les gardes de navigation incluent : 1. Garde avant globale "beforeEach" ; 2. Garde d'analyse globale "beforeResolve" ; 3. Garde exclusive à la route "beforeEnter" ; 4. Gardes au sein des composants "beforeRouteEnter" et "beforeRouteLeave".

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3. La garde de navigation fournie par

vue-router est principalement utilisée pour surveiller la navigation en sautant ou en annulant. Il existe de multiples possibilités d'intégration dans le processus de navigation sur itinéraire : globalement, exclusivement pour un seul itinéraire, ou au niveau des composants.

N'oubliez pas que les modifications apportées aux paramètres ou aux requêtes ne déclencheront pas les gardes de navigation d'entrée/sortie. Vous pouvez répondre à ces modifications en observant l'objet $route ou en utilisant la garde intégrée au composant beforeRouteUpdate.

Global before guard

Vous pouvez utiliser router.beforeEach pour enregistrer un global before guard :

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

Lorsqu'une navigation est déclenchée, le global before guard est appelé dans l'ordre de création. Les gardes sont analysées et exécutées de manière asynchrone. À ce stade, la navigation attend que toutes les gardes soient résolues.

Chaque méthode de garde reçoit trois paramètres :

• to : Route : l'objet de route cible qui est sur le point d'entrer

• from : Route : la route que la navigation actuelle est sur le point de quitter

• suivant : Fonction : certaine Cette méthode doit être appelée pour résoudre ce hook. L'effet d'exécution dépend des paramètres d'appel de la méthode suivante.

  • next() : passez au crochet suivant dans le pipeline. Si tous les hooks sont exécutés, l'état de navigation est confirmé.

  • next(false) : Interrompre la navigation en cours. Si l'URL du navigateur change (peut-être manuellement par l'utilisateur ou par le bouton Précédent du navigateur), l'adresse URL sera réinitialisée à l'adresse correspondant à l'itinéraire d'origine.

  • next('/') ou next({ path: '/' }) : accédez à une autre adresse. La navigation en cours est interrompue et une nouvelle navigation démarre. Vous pouvez transmettre un objet d'emplacement arbitraire à next, et des options telles que replace: true, name: 'home' et toutes les options utilisées dans les liens de routeur vers prop ou router.push peuvent être définies.

  • next(error) : (2.4.0+) Si le paramètre passé à next est une instance d'Error, la navigation sera terminée et l'erreur sera transmise au rappel enregistré par router.onError().

Assurez-vous que la fonction suivante est appelée exactement une fois dans une garde de navigation donnée. Il peut apparaître plus d'une fois, mais seulement si tous les chemins logiques ne se chevauchent pas, sinon le hook ne sera jamais analysé ou une erreur sera signalée. Voici un exemple de redirection vers /login lorsque l'utilisateur ne parvient pas à s'authentifier :

// BAD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  // 如果用户未能验证身份，则 `next` 会被调用两次
  next()
})
// GOOD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

Global résolution guard

Nouveau dans la version 2.5.0

Dans la version 2.5.0+, vous pouvez en enregistrer un auprès de router.beforeResolve Global guard. Ceci est similaire à router.beforeEach, sauf que la garde d'analyse est appelée avant que la navigation ne soit confirmée et après que toutes les gardes intégrées aux composants et les composants de routage asynchrone ont été analysées.

Gardes exclusives au routage

Vous pouvez définir directement les gardes beforeEnter dans la configuration du routage :

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

Les paramètres de méthode de ces gardes sont les mêmes que ceux des gardes avant globales.

Gardes au sein des composants

Enfin, vous pouvez définir les gardes de navigation d'itinéraire suivants directement dans le composant de routage :

• beforeRouteEnter

• beforeRouteUpdate (nouveau dans 2.2)

• beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

Le garde beforeRouteEnter ne peut pas y accéder car le garde est appelé avant que la navigation ne soit confirmée, donc le nouveau composant qui est sur le point d'apparaître n'a pas encore été créé.

Cependant, vous pouvez accéder à l'instance du composant en passant un rappel à next. Exécutez le rappel lorsque la navigation est confirmée et transmettez l'instance du composant comme paramètre de la méthode de rappel.

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

Notez que beforeRouteEnter est le seul garde qui prend en charge la transmission des rappels au suivant. Pour beforeRouteUpdate et beforeRouteLeave, ceci est déjà disponible, donc la transmission de rappels n'est pas prise en charge car ce n'est pas nécessaire.

beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}

Cette protection de congé est généralement utilisée pour empêcher les utilisateurs de quitter soudainement avant d'enregistrer les modifications. Cette navigation peut être annulée avec next(false).

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

Processus complet d'analyse de la navigation

• La navigation est déclenchée.

• Appelez la garde beforeRouteLeave dans le composant désactivé.

• Appelez le global avant chaque garde.

• Appelez beforeRouteUpdate guard (2.2+) dans les composants réutilisés.

• Appeler avantEntrer dans la configuration du routage.

• Résoudre les composants de routage asynchrone.

• Appel avantRouteEntrez dans le composant activé.

• Appelez le garde global beforeResolve (2,5+).

• Navigation confirmée.

• Appelez le global afterEach hook.

• Déclenchez la mise à jour du DOM.

• Appelez la fonction de rappel passée à next dans la garde beforeRouteEnter, et l'instance de composant créée sera transmise en tant que paramètre de la fonction de rappel.

【Recommandation associée : "Tutoriel vue.js"】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!