beforeEach implémente la fonction de vérification du saut de routage

Cette fois, je vais vous amener beforeEach pour implémenter la fonction de vérification de saut de routage. Quelles sont les précautions avantEach pour implémenter la vérification de saut d'itinéraire. jetez un oeil.

Effectuer quelques vérifications avant les sauts de routage, comme la vérification de la connexion (allez à la page de connexion si vous n'êtes pas connecté), est une exigence courante sur les sites Web. À cet égard, beforeRouteUpdate fourni par vue-route peut facilement implémenter des navigation gardes (navigation-guards).

Le nom navigation-guards semble bizarre, mais puisque le document officiel le traduit ainsi, appelons-le ainsi.

Collez l'adresse du document : https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

Tout d'abord, extrayons un document Utilisation de beforeRouteUpdate :

Vous pouvez utiliser router.beforeEach pour enregistrer un avant-garde global :

const router = new VueRouter({ ... }) 
router.beforeEach((to, from, next) => { 
 // ... 
})

Lorsqu'une navigation est déclenchée, l'avant-garde global est appelé dans l'ordre de création. Les gardes sont analysées et exécutées de manière asynchrone. À ce stade, la navigation attend que toutes les gardes soient résolues.

Chaque méthode de garde reçoit trois paramètres :

vers : Route : l'itinéraire cible à saisir objet

depuis : Route : L'itinéraire que la navigation actuelle est sur le point de quitter

suivant : Fonction : Cette méthode doit être appelée pour résoudre ce hook. L'effet d'exécution dépend des paramètres d'appel de la méthode suivante.

next() : passez au hook suivant dans le pipeline. Si tous les hooks sont exécutés, l'état de navigation est confirmé.

next(false) : Interrompre la navigation en cours. Si l'URL du navigateur change (peut-être manuellement par l'utilisateur ou par le bouton Précédent du navigateur), l'adresse URL sera réinitialisée à l'adresse correspondant à l'itinéraire d'origine.

next('/') ou next({ path: '/' }) : accédez à une autre adresse. La navigation en cours est interrompue et une nouvelle navigation démarre.

next(error) : (2.4.0+) Si le paramètre passé à next est une instance d'Erreur, la navigation sera terminée et l'erreur sera transmise au rappel enregistré par router.onError().

Assurez-vous d'appeler la méthode suivante, sinon le hook ne sera pas résolu.

Écrivez un exemple ci-dessous. Dans le blog précédent, notre page de compte, y compris les cours et les commandes, doit déterminer si vous êtes connecté avant de sauter. Si vous êtes connecté, allez à la page de connexion ; . Accédez à la page d'accueil :

const vueRouter = new Router({ 
  routes: [ 
    //...... 
    { 
     path: '/account', 
     name: 'account', 
     component: Account, 
     children: [ 
      {name: 'course', path: 'course', component: CourseList}, 
      {name: 'order', path: 'order', component: OrderList} 
     ] 
    } 
  ] 
}); 
vueRouter.beforeEach(function (to, from, next) { 
  const nextRoute = [ 'account', 'order', 'course']; 
  const auth = store.state.auth; 
  //跳转至上述3个页面 
  if (nextRoute.indexOf(to.name) >= 0) { 
    //未登录 
    if (!store.state.auth.IsLogin) { 
      vueRouter.push({name: 'login'}) 
    } 
  } 
  //已登录的情况再去登录页，跳转至首页 
  if (to.name === 'login') { 
    if (auth.IsLogin) { 
      vueRouter.push({name: 'home'}); 
    } 
  } 
  next(); 
});

Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes d'interaction avec les données de la mise en œuvre d'Axios

Explication détaillée du cas d'utilisation du composant angulaire

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!