Comment utiliser 7 types de gardes de routage dans vue3

Quels types de gardes-routage existe-t-il ?

Les gardes de route (gardes de navigation) sont divisés en trois types : les gardes globaux (3), les gardes exclusifs de route (1), les gardes de composants (3)

Les trois paramètres de le garde de route

vers : l'itinéraire cible vers lequel sauter

depuis : de quel itinéraire actuel sauter

suivant : Passer directement sans aucun blocage

Remarque : Vous devez vous assurer que la fonction suivante est appelée une fois dans une garde de navigation donnée. Il peut apparaître plusieurs fois, mais uniquement lorsque tous les chemins logiques ne se chevauchent pas, sinon une erreur sera signalée.

Cas :

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

1. Garde de routage globale

Il existe trois gardes de routage globales : la garde avant globale et la garde de poste globale Guard, global parsing guard

Global front guard

1 Comment utiliser : Configurer dans main.js, déclencher avant le saut de route, ce hook fonctionne C'est le cas. principalement utilisé pour la vérification de la connexion, c'est-à-dire vous informer à l'avance avant le saut d'itinéraire, afin de ne pas vous avertir s'il est trop tard

2 Code :

router.beforeEach((to,from,next)=>{})

. 3 .Exemple : Faire un jugement de connexion

router.beforeEach((to,from,next)=>{
  if(to.path == '/login' || to.path == '/register'){
    next();
  }else{
    alert('您还没有登录，请先登录');
    next('/login');
  }
})

Global post guard

1 Comment utiliser : Configurer dans main.js, contrairement à beforeEach, c'est après le saut de routage. terminé Déclenché, il se produit après beforeEach et beforeResolve, et avant beforeRouteEnter (garde au sein du composant). Le hook n'acceptera pas la fonction suivante ni ne modifiera la navigation elle-même

2 Code :

router.afterEach((to,from)=>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->})

Global parsing guard

1. Configuré en .js, ce hook est similaire à beforeEach et est également déclenché avant le saut d'itinéraire. La différence est avant la confirmation de la navigation, et en même temps après l'analyse des gardes et des composants de routage asynchrone dans tous les composants, c'est-à-dire. , après beforeEach et beforeRouteEnter dans le composant, afterEach appelé avant.

2. Code :

router.beforeResolve((to,from,next)=>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->})

1. Gardes dans le composant

Il y a trois gardes dans le composant : beforeRouteEnter avant le la route entre, beforeRouteLeave lorsque la route part, beforeRouteUpdate lorsque la page est mise à jour

• beforeRouteEnter(to, from, next)

  #🎜🎜 #

1. Utilisation : Utilisées dans les modèles de composants, écrites au même niveau que les méthodes : {}, les gardes de routage des composants sont des gardes de routage écrits dans chaque fichier vue distinct

2. . Code :

beforeRouteEnter(to, from, next) {
    // 在组件生命周期beforeCreate阶段触发
    console.log('组件内路由前置守卫 beforeRouteEnter', this) // 访问不到this
    next((vm) => {
      console.log('组件内路由前置守卫 vm', vm) // vm 就是this
    })
  },

beforeRouteUpdate(to, from, next)

1. Utilisé dans les modèles de composants, écrits au même niveau que les méthodes : {}, composant route guard Il s'agit d'un garde de routage écrit dans chaque fichier vue séparé

2 Code :

beforeRouteUpdate (to, from, next) {
    // 同一页面，刷新不同数据时调用，
    // 可以访问组件实例 
}

• beforeRouteLeave(to, from, next. )

1 Comment l'utiliser : Utilisez-le dans le modèle de composant, écrit au même niveau que les méthodes : {}, la garde de routage du composant est écrite dans chaque élément séparé. vue file Garde de route

2. Code :

beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例
}

Garde exclusive de route

Il n'y a qu'une seule garde exclusive pour la route : déclenchée lors de la saisie de l'itinéraire avantEntrer

• Route garde exclusive avantEntrer(vers, depuis, suivant)

#🎜 🎜#1 .Utilisation :

Utilisez

dans router.js. La garde exclusive de route est une garde configurée séparément pour la route sur la page de configuration de routage 2. 🎜🎜#

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

Processus d'analyse de la navigation

1 Déclenchez l'entrée dans d'autres itinéraires

2. Appelez le garde du composant pour quitter l'itinéraire avantRouteLeave

3. . Appelez le global before Set guard beforeEach

4. Appelez beforeRouteUpdate
5 Appelez beforeEnter
6 Analysez le composant de routage asynchrone
7. le composant de routage. Appelez le garde de résolution global avant Resolve
9. La navigation est confirmée
10. Appelez le post-hook global aprèsChaque
11. Déclenchez la mise à jour du DOM montée
12. fonction de rappel passée au suivant dans la garde beforeRouteEnter

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!