Comment utiliser les gardes de navigation dans Vue Router ?

Comment utiliser Navigation Guard dans Vue Router ?

Navigation Guard est une fonctionnalité très importante et puissante de Vue Router. Elle nous permet d'exécuter une logique personnalisée avant que la navigation ne soit déclenchée ou avant de quitter l'itinéraire actuel. En utilisant des gardes de navigation, nous pouvons implémenter des fonctions telles que la vérification des autorisations de routage, l'animation de changement de page, etc.

Vue Router propose trois types de gardes de navigation :

1. Global guards : gardes qui seront déclenchées par toutes les routes de l'application, y compris beforeEach, beforeResolve et afterEach.
2. Gardets d'itinéraire : gardes qui déclencheront uniquement des itinéraires spécifiques, notamment beforeEnter, beforeRouteEnter, beforeRouteUpdate et beforeRouteLeave.
3. Gardes au sein du composant : Seules les gardes du composant actuel seront déclenchées, y compris beforeRouteEnter, beforeRouteUpdate et beforeRouteLeave.

Expliquons comment utiliser ces gardes de navigation.

Tout d'abord, nous devons introduire Vue Router dans le projet Vue et créer une instance de routage. Dans le processus de création d'une instance, nous pouvons définir des gardes globales :

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [...]
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 在进入每个路由之前执行的逻辑
  next()
})

// 全局解析守卫
router.beforeResolve((to, from, next) => {
  // 在全部组件被解析之后执行的逻辑
  next()
})

// 全局后置守卫
router.afterEach((to, from) => {
  // 在进入每个路由之后执行的逻辑
})

Dans le code ci-dessus, nous avons défini trois gardes globales. beforeEach est utilisé pour exécuter la logique avant d'entrer dans chaque route, beforeResolve est utilisé pour exécuter la logique une fois que tous les composants ont été analysés et afterEach est utilisé pour exécuter la logique après avoir entré chaque route. En utilisant la méthode next(), vous pouvez exécuter la garde suivante ou effectuer un saut d'itinéraire.

Ensuite, nous pouvons définir des gardes de route. Lors de la création d'une route, nous pouvons définir la garde pour chaque configuration de route spécifique :

import Home from './views/Home.vue'
import About from './views/About.vue'

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About,
      beforeEnter: (to, from, next) => {
        // 在进入指定路由之前执行的逻辑
        next()
      }
    }
  ]
})

Dans le code ci-dessus, nous définissons la garde beforeEnter pour la route /about. Avant d'entrer dans l'itinéraire, la fonction que nous avons transmise sera exécutée. Nous pouvons écrire une logique personnalisée dans la fonction, puis utiliser la méthode next() pour effectuer le prochain saut de garde ou d'itinéraire.

Enfin, nous pouvons également définir des gardes à l'intérieur du composant. À l'intérieur du composant, nous pouvons utiliser trois types de gardes : beforeRouteEnter, beforeRouteUpdate et beforeRouteLeave :

export default {
  ...
  beforeRouteEnter(to, from, next) {
    // 在进入当前组件之前执行的逻辑
    next()
  },
  beforeRouteUpdate(to, from, next) {
    // 当前组件复用时，更新路由参数时执行的逻辑
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 在离开当前组件之前执行的逻辑
    next()
  }
}

Le code ci-dessus montre l'utilisation des gardes à l'intérieur du composant. Nous pouvons écrire notre logique dans le hook de cycle de vie correspondant, puis utiliser next(. ) Étape suivante.

Pour résumer, la garde de navigation dans Vue Router est une fonction très flexible et puissante. Nous pouvons utiliser des gardes globales, des gardes de routage et des gardes intra-composants pour implémenter diverses logiques personnalisées. Dans le développement quotidien, nous pouvons utiliser ces protections de manière flexible en fonction de besoins spécifiques pour obtenir une meilleure expérience utilisateur et une meilleure mise en œuvre des fonctions.

Pour résumer, la protection de navigation est une fonction très importante dans Vue Router. Elle peut nous aider à effectuer un traitement logique personnalisé pendant le processus de changement d'itinéraire. Grâce aux gardes globaux, aux gardes de route et aux gardes intra-composants, nous pouvons implémenter diverses fonctions, telles que l'interception de route, la vérification des autorisations, l'animation de changement de route, etc. Dans le développement réel du projet, l'utilisation rationnelle des gardes de navigation peut améliorer l'efficacité du développement et l'expérience utilisateur.

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!