Partage de technologie

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Dans Vue, les intercepteurs d'itinéraire sont principalement utilisés pour intercepter et traiter avant de naviguer vers un certain itinéraire ou lorsque vous quittez un certain itinéraire. Ce mécanisme permet aux développeurs d'exécuter une logique spécifique avant ou après la navigation sur l'itinéraire, telle que la vérification des autorisations, le chargement des données, les sauts de page, etc.

Dans Vue Router, les intercepteurs de route peuvent être implémentés des manières suivantes :

1. Global avant les gardes:

   • router.beforeEach(to, from, next): Enregistrer une pré-garde globale Lorsque la navigation d'itinéraire est déclenchée, la garde sera appelée avant le changement d'itinéraire.
   • Objectif : convient à la vérification globale des autorisations, au contrôle de la barre de progression du chargement des pages, etc.

     router.beforeEach((to, from, next) => {
         // 检查用户权限
         if (!userAuthenticated) {
             next('/login'); // 未认证跳转到登录页
         } else {
             next(); // 已认证则放行
         }
     });
     

2.Global Resolve Guards:

• router.beforeResolve(to, from, next): Enregistrez une garde d'analyse globale, qui est appelée après la garde avant globale et avant que la navigation ne soit confirmée.

  router.beforeResolve((to, from, next) => {
      // 在导航被确认之前，进行数据加载等操作
      fetchData().then(() => {
          next();
      });
  });
  

3. Garde par route:

• Ajoutez-le directement à l'objet de configuration de routagebeforeEnterChamp pour ajouter une logique de garde à un seul itinéraire.

const route = {
    path: '/profile',
    component: Profile,
    beforeEnter: (to, from, next) => {
        // 检查用户是否有权限访问该路由
        if (userHasAccess) {
            next();
        } else {
            next('/403'); // 没有权限跳转到403页面
        }
    }
};

 

4. Protections intégrées aux composants:

• Utilisé à l'intérieur des composantsbeforeRouteEnter, beforeRouteUpdate, etbeforeRouteLeaveFonctions Hook, ces fonctions seront appelées lorsque l'itinéraire accède au composant actuel, lorsque le composant actuel est réutilisé et lorsqu'il quitte le composant actuel.

export default {
    beforeRouteEnter (to, from, next) {
        // 在路由导航进入该组件前执行逻辑
        next(vm => {
            // 可以访问实例 `vm`
        });
    },
    beforeRouteUpdate (to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 可以访问组件实例 `this`
        // 通常用于更新组件的数据
        next();
    },
    beforeRouteLeave (to, from, next) {
        // 在导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
        next();
    }
}

Les mécanismes de ces intercepteurs de route peuvent aider les développeurs à contrôler le processus de navigation des applications à différents niveaux et scénarios, et à mettre en œuvre des fonctions telles que le contrôle des autorisations, le préchargement des données et les sauts de page, permettant ainsi de mieux gérer et optimiser l'expérience interactive des applications frontales.