Comment utiliser les gardes de navigation d'itinéraire pour contrôler les sauts d'itinéraire dans Vue

Dans Vue, le routage est une partie très importante, qui contrôle les sauts et la navigation entre les pages. Dans le développement réel, nous devons souvent contrôler certains itinéraires, par exemple, l'accès ne peut être effectué que lorsque vous êtes connecté ou que des droits d'administrateur sont requis pour l'accès, etc. À l’heure actuelle, vous devez utiliser des gardes de navigation de routage pour mettre en œuvre le contrôle de routage.

Le garde de navigation d'itinéraire peut intercepter les sauts d'itinéraire et effectuer certaines opérations avant ou après les sauts d'itinéraire. Dans Vue, les gardes de navigation de routage sont généralement implémentés à l'aide de gardes de navigation globaux et de gardes de navigation intra-composants. Ci-dessous, nous expliquerons comment utiliser ces deux méthodes respectivement.

1. Global Navigation Guard

Global navigation guard peut contrôler le routage global et est généralement enregistré dans l'instance Vue. La garde de navigation globale contient trois fonctions de crochet :

1. beforeEach(to, from, next)

Cette fonction est exécutée avant le saut de route. Elle reçoit trois paramètres :

• to : l'objet de routage qui s'apprête à sauter.
• from : L'objet de routage en cours de saut
• next : Fonction de rappel, qui peut être utilisée pour contrôler les sauts de routage

Dans la fonction beforeEach, on peut juger de l'itinéraire et continuer à sauter si les conditions sont remplies, sinon utiliser la méthode suivante Intercepter ou rediriger. Par exemple, pour déterminer s'il faut se connecter :

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.state.isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

2. afterEach(to, from)

Cette fonction est exécutée après le saut de route. Elle reçoit deux paramètres :

• to : l'objet de routage qui vient de passer à
.
• from : tout à l'heure L'objet de l'itinéraire de sortie

Dans la fonction afterEach, nous pouvons traiter l'itinéraire, comme l'enregistrement des enregistrements d'accès, etc.

router.afterEach((to, from) => {
  // 记录访问记录
})

3. resolve(to, from, next)

Cette fonction peut définir une fonction de hook dans la configuration de routage pour gérer les sauts de routage asynchrones.

Par exemple :

{
  path: '/dashboard',
  component: Dashboard,
  beforeEnter: (to, from, next) => {
    if (store.state.isAdmin) {
      next()
    } else {
      next('/login')
    }
  }
}

Lors de l'utilisation de gardes de navigation globales, il est important de noter que si plusieurs gardes sont exécutés, la méthode suivante doit être utilisée pour contrôler l'ordre d'exécution.

2. Garde de navigation intégré

Le garde de navigation intégré utilise deux fonctions, beforeRouteEnter et beforeRouteLeave, pour implémenter le contrôle de routage.

1. beforeRouteEnter(to, from, next)

Cette fonction est exécutée avant que le composant ne soit instancié. Elle reçoit trois paramètres :

• to : l'objet de routage qui est sur le point de sauter
• from : l'itinéraire qui est sur le point de sauter. Objet en train de sauter
• next : fonction de rappel, utilisée pour contrôler les sauts d'itinéraire

Dans la fonction beforeRouteEnter, puisque le composant n'a pas été instancié, vous ne pouvez pas accéder directement à cet objet, vous devez donc utiliser la méthode next pour passer un rappel fonction. Exécuté après l’instanciation du composant.

Par exemple, nous pouvons utiliser cette fonction pour créer des itinéraires dynamiques :

{
  path: '/user/:id',
  component: User,
  beforeEnter: (to, from, next) => {
    api.getUser(to.params.id)
      .then(user => {
        to.meta.user = user
        next()
      })
      .catch(error => {
        next('/error')
      })
  }
}

2. beforeRouteLeave(to, from, next)

Cette fonction est exécutée avant le départ du composant, et elle reçoit trois paramètres :

• to : L'objet de routage qui est sur le point de sauter
• from : L'objet de routage qui saute actuellement
• suivant : La fonction de rappel, utilisée pour contrôler le saut d'itinéraire

Dans la fonction beforeRouteLeave, nous pouvons traiter le composant actuel, tel que enregistrer les données ou inviter l'utilisateur à attendre.

Par exemple, nous pouvons demander à l'utilisateur s'il doit enregistrer les données avant de quitter la page :

beforeRouteLeave(to, from, next) {
  if (this.formDirty) {
    if (confirm('您是否要保存数据？')) {
      this.saveData()
      next()
    } else {
      next(false)
    }
  } else {
    next()
  }
}

Lors de l'utilisation des gardes de navigation au sein du composant, il convient de noter que si plusieurs gardes sont exécutés, la méthode suivante doit être utilisée pour contrôler l'ordre d'exécution.

En résumé, les gardes de navigation de routage sont une partie très importante de Vue, qui peut nous aider à contrôler le routage de manière flexible. Dans le développement actuel, nous devons choisir une manière appropriée d'utiliser les gardes de navigation de routage en fonction des besoins de l'entreprise, afin d'obtenir un contrôle raffiné du routage et d'améliorer 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!