avantChaque implémentation du didacticiel de cas de navigation guard

Cette fois, je vais vous apporter un tutoriel sur la mise en œuvre de la navigation guard beforeEach. Quelles sont les précautions pour la mise en œuvre de la navigation guard beforeEach Ce qui suit est un cas pratique, jetons un coup d'œil. .

Routage Effectuer une vérification avant de sauter, comme la vérification de la connexion (accéder à la page de connexion sans vous connecter), est une exigence courante sur les sites Web. À cet égard, beforeRouteUpdate fourni par vue-route peut facilement implémenter des gardes de navigation (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 :

Comment JS stocke les valeurs d'origine et les valeurs de référence

JS utilise des expressions régulières pour déterminer la date de naissance

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!