Quels sont les crochets de navigation de vue ?

Vue dispose de trois types de hooks de navigation : 1. Global guard hook, qui fait référence à la fonction de hook qui opère directement sur l'exemple de routage. La caractéristique est que tous les composants de configuration de routage seront déclenchés. 2. Le crochet de garde exclusif d'itinéraire fait référence à une fonction de crochet qui peut également être définie lors de la configuration d'un seul itinéraire et ne peut fonctionner que sous cet itinéraire. 3. Le crochet de garde local fait référence à la fonction de crochet exécutée dans le composant, similaire à la fonction de cycle de vie dans le tableau, qui est équivalente à la fonction de crochet de cycle de vie ajoutée pour le composant configuré avec le routage.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Le rôle du crochet de navigation

• Le crochet de navigation fourni par vue-router est principalement utilisé pour intercepter la navigation et la laisser terminer le saut ou l'annuler.

Classification des crochets de navigation

• Garde globale
• Garde exclusive d'itinéraire
• Garde partielle

1. à l'exemple de routage des Hooks qui fonctionnent directement sur la fonction , la caractéristique est que tous les composants de configuration de routage seront déclenchés. Pour faire simple, déclencher le routage déclenchera ces fonctions de hook. L’ordre d’exécution des fonctions hook inclut beforeEach, beforeResolve et afterEach.

<p>[beforeEach]<a id="beforeEachtofromnext_8"></a></p> : Déclenché avant le saut de la route. Les paramètres incluent to, from et next. Ce hook est principalement utilisé pour la vérification de la connexion, c'est-à-dire que la route n'a pas sauté. encore. Veuillez nous en informer à l'avance pour éviter qu'il ne soit trop tard.

 router.beforeEach  router.beforeResolve  router.afterEach
    const router = new VueRouter({ ... });
    router.beforeEach((to, from, next) => {
        // do someting
    });

<strong>[beforeEach]</strong>：在路由跳转前触发，参数包括to,from,next三个，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚。

 const router = new VueRouter({ ... });
    router.beforeEach((to, from, next) => {
        // do someting
    });
  //全局后置钩子，后置钩子并没有 next 函数，也不会改变导航本身
    router.afterEach((to, from) => {
        // do someting
    });

• to：代表要进入的目标，它是一个路由对象
• from：代表当前正要离开的路由，同样也是一个路由对象
• next：这是一个必须需要调用的方法，而具体的执行效果则依赖next方法调用的参数

<strong>[beforeResolve]</strong>：这个钩子和beforeEach类似，也是路由跳转前触发，参数也是to,from,next三个，和beforeEach区别官方解释为：

 区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就会被调用。

即在beforeEach和组件内beforeRouteEnter之后，afterEach之后，afterEach之前调用。

<strong>[afterEach]</strong>：和beforeEach相反，它是在路由跳转完成之后触发，参数包括to、from，没有了next，它发生在beforeEach和beforeResolve之后，beforeRouteEnter(足迹按内守卫)之前。

  cont router = new VueRouter({
        routes: [
            {
                path: '/file',
                component: File,
                beforeEnter: (to, from ,next) => {
                    // do someting
                }
            }
        ]
    });

2、路由独享守卫

是指在单个路由配置的时候也可以设置的钩子函数，且只能在这个路由下起作用。其位置如下，也就是像File这样的组件都存在这样的钩子函数。目前它只有一个钩子函数beforeEnter。

[beforeEnter]to : Représente la cible à saisir, c'est un objet de routage

from : Représente l'itinéraire qui part actuellement, également un objet de routage next : C'est une méthode qui doit être appelée, et le spécifique Le l'effet d'exécution dépend des paramètres appelés par la méthode next

[beforeResolve]

 : Ce hook est similaire à beforeEach, il est également déclenché avant la route saute, et le paramètre est également to L'explication officielle de la différence entre , from, next et beforeEach est : La différence est qu'avant la confirmation de la navigation, et après que les gardes et les composants de routage asynchrone dans tous les composants soient analysés , le garde analyseur sera appelé.
C'est-à-dire qu'il est appelé après beforeEach et beforeRouteEnter dans le composant, après afterEach et avant afterEach.

<p>[afterEach]</p> : Contrairement à beforeEach, il est déclenché une fois le saut d'itinéraire terminé. Les paramètres incluent to et from Sans next, cela se produit. Après beforeEach et beforeResolve, avant beforeRouteEnter (empreinte à l'intérieur de la garde).

 const File = {
        template: `<div>This is file</div>`,
        beforeRouteEnter(to, from, next) {
            // do someting
            // 在渲染该组件的对应路由被 confirm 前调用
        },
        beforeRouteUpdate(to, from, next) {
            // do someting
            // 在当前路由改变，但是依然渲染该组件是调用
        },
        beforeRouteLeave(to, from ,next) {
            // do someting
            // 导航离开该组件的对应路由时被调用
        }
    }

2. Route exclusive guard

fait référence à une fonction de crochet qui peut également être définie lors de la configuration d'un seul itinéraire et ne peut fonctionner que sous cet itinéraire. Son emplacement est le suivant, c'est-à-dire que des composants comme File ont de telles fonctions de hook. Actuellement, il n’a qu’une seule fonction hook avant Entrée.

[beforeEnter]

 : C'est exactement la même chose que beforeEach Si les deux sont définis, il sera exécuté immédiatement après beforeEach. de, et ensuite.

routes:[
      {
          path:'/b',
          component:B,
          beforeEnter:(to,form,next)=>{
             ..... 
          }
      }
  ]

3. Local guard

fait référence à la fonction de hook exécutée dans le composant, similaire à la fonction de cycle de vie dans le tableau, qui est équivalente à la fonction de hook de cycle de vie ajoutée pour le composant configuré avec le routage. Les fonctions de hook incluent beforeRouteEnter, beforeRouteUpdate (nouveau dans la version 2.2) et beforeRouteLeave par ordre d'exécution. L'emplacement d'exécution est le suivant : 🎜rrreee🎜🎜🎜🎜🎜Processus d'analyse de navigation de saut d'itinéraire, lorsque la route A -> B route 🎜🎜 🎜 🎜1. Appelez le gardien de congé de la composante A. beforeRouterLeave🎜🎜2 dans le composant A appelle la garde globale beforeEach. router.beforeEach🎜🎜3. Exécutez ensuite beforeEnter dans la configuration de la route B. 🎜rrreee🎜4. Exécutez ensuite la garde d'entrée du composant B. BeforeRouterEnter🎜🎜5 dans le composant B appelle la garde globale beforeResolve (2,5+). router.beforeResolve🎜🎜6. La navigation est confirmée. 🎜🎜7. Appelez le crochet global afterEach. router.afterEach🎜🎜8. Déclenchez la mise à jour du DOM. 🎜🎜【Recommandations associées : 🎜tutoriel vidéo vuejs🎜, 🎜développement web front-end🎜】🎜

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!