Introduction aux fonctions de garde de route dans la documentation Vue

Vue est un framework frontal populaire qui offre de nombreuses fonctionnalités puissantes, dont la fonction route guard. La fonction Route Guard est une fonctionnalité importante du routage Vue et est utilisée pour exécuter une logique de contrôle lors de la navigation vers ou à la sortie d'un itinéraire. Les fonctions Route Guard vous permettent de contrôler la lecture et la modification des itinéraires, ainsi que la navigation sur les itinéraires en fonction de diverses conditions. Cet article présentera la fonction route guard dans le document Vue pour vous aider à comprendre le rôle et l'utilisation de la fonction route guard dans Vue.

Les fonctions de garde d'itinéraire peuvent être divisées en trois catégories : les gardes avant globaux, les crochets de poste globaux et les gardes exclusifs d'itinéraire. Ci-dessous, nous présentons respectivement ces trois types de gardes.

Pré-garde globale :

La pré-garde globale peut être exécutée avant tout saut de voie. Vous pouvez enregistrer un préfixe global sur l'objet routeur Vue afin qu'il prenne effet sur chaque route de l'ensemble du projet. Enregistrez une garde globale beforeEach sur l'objet Vue Router à l'aide de la méthode beforeEach comme indiqué ci-dessous :

router.beforeEach((to, from, next) => {
  // to: 即将进入的目标路由对象
  // from: 当前导航正要离开的路由对象
  // next: 下一步执行钩子函数，如果全部执行完了，则返回空或一个true值
})

L'utilisation la plus simple consiste à lancer une opération sortante en appelant la méthode next(). Si vous souhaitez annuler la navigation (par exemple, l'utilisateur n'a pas l'autorisation d'accéder), renvoyez false ou une chaîne ou une instance d'Error, qui mettra fin à la navigation et passera directement à l'itinéraire correspondant. Par exemple, le garde suivant met fin à la navigation si l'utilisateur n'est pas connecté :

router.beforeEach((to, from, next) => {
  const isAuthenticated = store.getters.isAuth
  if (!isAuthenticated && to.path !== '/login') {
    next('/login')
  } else {
    next()
  }
})

Posthook global :

Le posthook global sera exécuté une fois la navigation confirmée. Cette garde n'accepte pas de fonction suivante et ne modifie pas la navigation elle-même :

router.afterEach((to, from) => {
  // to: 要进入的目标路由
  // from: 正在离开的路由
})

Gardes exclusifs à l'itinéraire :

Les gardes exclusifs à l'itinéraire peuvent être définis dans la configuration de l'itinéraire, ce qui signifie que vous pouvez définir différents préfixes et postfixes Gardes à gérer différents itinéraires. Vous pouvez utiliser la garde beforeEnter pour configurer une fonction de garde exclusive pour une route spécifique (contrairement à la garde globale, il n'est pas nécessaire d'enregistrer la garde sur l'objet Router). La garde beforeEnter ne se déclenchera que si elle existe dans la configuration de route exclusive.

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

La logique exécutée dans une garde exclusive de route est très similaire à la logique de la fonction globale de garde frontale, mais la garde frontale vous permet d'effectuer la même logique pour toutes les routes, tandis que la garde exclusive de route peut définir une logique spécifique.

Résumé :

La fonction Route Guard est une partie importante du routage Vue, qui vous offre la possibilité de contrôler la navigation sur l'itinéraire. Les protections avant globales, les crochets de poteau mondiaux et les protections exclusives à l'itinéraire sont trois types de protections différents, chacun avec des utilisations et des caractéristiques différentes. Lorsque vous utilisez le routage Vue, une compréhension et une utilisation plus approfondies de ces différents types de gardes peuvent vous aider à mieux contrôler la navigation sur les itinéraires et à développer des applications frontales plus flexibles.

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!