Vue-Router : Comment utiliser les fonctions de hook de routage pour gérer les changements de routage ?

Vue-Router : Comment utiliser la fonction de crochet de routage pour gérer les changements de routage ?

Introduction :
Vue-Router est le plug-in officiel de gestion de routage de Vue.js. Il peut nous aider à implémenter la fonction de routage des applications monopage dans les applications Vue.js. En plus des fonctions de base de navigation de routage, Vue-Router fournit également une série de fonctions de hook qui nous permettent d'effectuer les opérations correspondantes lors des changements de routage. Cet article présentera les fonctions de hook de Vue-Router et comment les utiliser pour gérer les modifications de routage.

1. Fonctions de hook de Vue-Router
Dans Vue-Router, il existe trois types de fonctions de hook : les fonctions de hook globales, les fonctions de hook exclusives à la route et les fonctions de hook au sein des composants.

1. Fonction Global Hook
   La fonction Global Hook sera appelée lorsque la navigation de chaque itinéraire sera déclenchée. Vue-Router fournit les fonctions de hook globales suivantes :
2. beforeEach(to, from, next) : appelée avant la navigation sur l'itinéraire, elle peut être utilisée pour la vérification des autorisations ou les pré-opérations globales.
3. afterEach(to, from) : Appelé après la navigation d'itinéraire, il peut être utilisé pour effectuer des post-opérations globales.
4. Fonction de crochet exclusif de routage
   La fonction de crochet exclusif de routage n'est appelée que pour un itinéraire spécifique. Vue-Router fournit les fonctions de hook suivantes, exclusives à l'itinéraire :
5. beforeEnter(to, from, next) : il est appelé avant d'entrer dans un itinéraire et peut être utilisé pour effectuer des pré-opérations sur l'itinéraire.
6. Fonction Hook au sein du composant
   La fonction hook au sein du composant est appelée lorsque le composant est dirigé vers l'itinéraire. Ces fonctions de hook sont similaires aux fonctions de hook de cycle de vie de Vue.js, notamment :
7. beforeRouteEnter(to, from, next) : appelée avant que la route n'entre dans le composant, mais l'instance du composant n'a pas encore été créée et ne peut pas accéder au exemple de composant ceci.
8. beforeRouteUpdate(to, from, next) : Appelé lorsque le composant existe déjà mais que la route change, vous pouvez accéder à celui de l'instance du composant.
9. beforeRouteLeave(to, from, next) : Appelé en quittant l'itinéraire actuel, vous pouvez accéder à celui de l'instance du composant.

2. Comment utiliser les fonctions de hook pour gérer les changements de routage
Ensuite, nous utiliserons un exemple de code pour démontrer comment utiliser les fonctions de hook de Vue-Router pour gérer les changements de routage.

1. Exemple de fonction hook globale

   // 创建路由实例
   const router = new VueRouter({
     routes: [
    // 路由配置
     ]
   });
   
   // 全局前置守卫
   router.beforeEach((to, from, next) => {
     // 在路由导航之前进行权限验证
     if (to.meta.authRequired && !store.state.isAuthenticated) {
    next('/login');
     } else {
    next();
     }
   });
   
   // 全局后置钩子
   router.afterEach((to, from) => {
     // 在路由导航之后进行一些操作，比如记录日志
     logRouteChange(to, from);
   });

2. Exemple de fonction hook exclusive à la route

   // 路由配置
   const routes = [
     {
    path: '/admin',
    component: AdminComponent,
    beforeEnter: (to, from, next) => {
      // 在进入 AdminComponent 之前进行权限验证
      if (to.meta.authRequired && !store.state.isAdmin) {
        next('/login');
      } else {
        next();
      }
    }
     }
   ];

3. Exemple de fonction hook dans le composant

   // 组件配置
   export default {
     // 组件内的钩子函数
     beforeRouteEnter(to, from, next) {
    // 在路由进入组件前进行一些操作
    next();
     },
     beforeRouteUpdate(to, from, next) {
    // 在路由变化时进行一些操作
    next();
     },
     beforeRouteLeave(to, from, next) {
    // 在离开当前路由时进行一些操作
    next();
     }
   }

Conclusion :
En utilisant la fonction hook de Vue-Router, nous pouvons gérer de manière plus flexible les modifications de routage, y compris la vérification des autorisations, les pré- et post-opérations globales et certaines opérations au sein des composants. J'espère que cet article vous aidera à comprendre et à utiliser les fonctions de hook de routage.

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!