Quels hooks et applications Vue-router propose-t-il en JavaScript ?

Le contenu de cet article concerne les hooks et les applications que Vue-router a en JavaScript ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Quels sont les hooks de Vue-router ? Scénario d'utilisation ?

L'implémentation du routeur peut être cliqué ici

Nous avons déjà parlé de ce qu'est un hook en langage clair, et nous le répéterons ici, c'est-à-dire avant quoi, et après quoi, on l'appelle hooks en anglais, cycle de vie en termes professionnels, et guards en termes plus prétentieux...

La notion de hooks existe aussi dans vue-router, qui se divise en trois étapes de mémoire

• Garde globale

• Garde exclusive d'itinéraire

• Garde exclusive de composant

Global guard

C'est facile à comprendre. Le global guard peut surveiller les actions globales du routeur

• router.beforeEach est déclenché lorsque la route est préfixée

const router = new VueRouter({ ... })
// to 要进入的目标路由对象
// from 当前的路由对象
// next resolve 这个钩子，next执行效果由next方法的参数决定
// next() 进入管道中的下一个钩子
// next(false) 中断当前导航
// next({path}) 当前导航会中断，跳转到指定path
// next(error) 中断导航且错误传递给router.onErr回调
// 确保前置守卫要调用next，否然钩子不会进入下一个管道
router.beforeEach((to, from, next) => {
  // ...
})

• router.afterEach est déclenché lorsque la route est postfixée

// 与前置守卫基本相同，不同是没有next参数
router.afterEach((to, from) => {
  // ...
})

• router.beforeResolve

Similaire à router.beforeEach, il est déclenché après l'analyse des gardes et des composants de routage asynchrone dans tous les composants

Route exclusive guard

Les paramètres et les significations sont les mêmes que ceux de la garde globale, mais l'emplacement de la définition est différent

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

Garde exclusive au composant

Une nouvelle garde dans le composant , beforeRouteUpdate, est déclenché lorsque le composant peut être réutilisé, tel que /demo/:id, dans /demo/ 1 Lorsque vous passez à /demo/2, /demo peut être réutilisé, et beforeRouteUpdate

const Demo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    ...
  },
  // 在当前路由改变，但是该组件被复用时调用
  beforeRouteUpdate (to, from, next) {
    ...
  },
  beforeRouteLeave (to, from, next) {
    ...
  }
}

• sera déclenché. Notez que vous ne pouvez pas obtenir cela du composant actuel avant beforeRouteEnter, car le composant a également été créé. Nous pouvons utiliser next(vm => {console.log(vm)}) pour. renvoie celui du composant actuel pour effectuer certaines opérations logiques

Scénarios d'utilisation

La chose la plus typique est d'effectuer un contrôle d'autorisation avant l'entrée de l'itinéraire lorsque l'itinéraire quitte. , effacer ou stocker certaines informations, tâches, etc.

Résumé

Les hooks dans vue-router sont divisés en globaux, partiels et composants. Ils ont trois formes : pré-garde et. post-guard. La pré-garde du composant ne peut pas obtenir celle du composant actuel car le composant n'a pas encore été créé et peut être renvoyé via le paramètre suivant, la garde avant doit appeler la méthode suivante, sinon elle ne le fera pas. entrez dans le tube suivant

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!