Utilisez vue-route+beforeEach pour créer des gardes de navigation

Cette fois, je vais vous présenter les précautions à prendre pour utiliser vue-route+beforeEach pour créer des gardes de navigation. Ce qui suit est un cas pratique, jetons un oeil.

Effectuer quelques vérifications avant les sauts de routage, comme la vérification de la connexion (accédez à 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 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 l'utilisation de beforeRouteUpdate dans un document :

Vous pouvez utiliser router.beforeEach pour enregistrer une garde globale beforeEach :

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

Lorsqu'une navigation est déclenchée, la garde globale beforeEach est appelée 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'objet route cible à saisir

depuis : Route : la navigation actuelle Le route qui est sur le point de partir

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 utiliser le plug-in JS Cookie

Comment utiliser Node.js pour s'inscrire pour l'activation par e-mail

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!