Tutoriel pratique sur l'utilisation des hooks de routage Vue

Cette fois, je vais vous apporter un tutoriel pratique sur la façon d'utiliser le hook de routage Vue. Quelles sont les précautions lors de l'utilisation du hook de routage Vue. Voici des cas pratiques, jetons un coup d'œil.

1. Syntaxe du hook de routage

Dans le document officiel de vue-router, le hook de routage est traduit en garde de navigation. Voici le contenu du document résumé Vous pouvez également vous rendre sur le site officiel via le portail pour lire le contenu détaillé.

Crochet de routage

Les hooks de routage sont principalement définis pour que les utilisateurs effectuent un traitement spécial lors des changements de routage. . Quelle bouchée.

De manière générale, vue propose trois grands types de hooks

1. Crochets globaux
2. Crochets exclusifs à un certain itinéraire
3. Crochets intégrés

Trois paramètres interviennent dans les trois hooks de routage. Passons directement à l'introduction officielle ici

. to : Route : L'objet route cible qui est sur le point d'entrer
from : Route : L'itinéraire que la navigation actuelle est sur le point de quitter
next : 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.
suivant('/') ou suivant({ chemin : '/' }) : accédez à une autre adresse. La navigation en cours est interrompue et une nouvelle navigation démarre.

(1).Global guard (crochet de routage global)

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

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

Chaque méthode de garde accepte trois paramètres :

1. vers : Itinéraire : L'objet d'itinéraire cible qui est sur le point d'entrer

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

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

Remarque : lorsque vous utilisez des hooks de routage globaux, assurez-vous d'appeler next() !!!

(2). Garde exclusive d'itinéraire (crochet dans l'itinéraire)

Vous pouvez définir la garde beforeEnter directement sur la configuration de l'itinéraire :

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

Ces gardes ont les mêmes paramètres de méthode que les gardes frontaux globaux.

(3). Gardes à l'intérieur du composant (crochet à l'intérieur du composant)

Enfin, vous pouvez définir la garde de navigation d'itinéraire directement dans le composant de routage :

1. beforeRouteEnter

2. beforeRouteUpdate (nouveau dans la version 2.2)

3. beforeRouteLeave

const Foo = {
 template: `...`,
 beforeRouteEnter (to, from, next) {
  // 在渲染该组件的对应路由被 confirm 前调用
  // 不！能！获取组件实例 `this`
  // 因为当守卫执行前，组件实例还没被创建
 },
 beforeRouteUpdate (to, from, next) {
  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this`
 },
 beforeRouteLeave (to, from, next) {
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
 }
}

2. Scénarios d'application de hooks de routage en développement réel

Les hooks de routage sont rarement utilisés dans le processus de développement réel. Dans les projets réels, je n'ai utilisé que beforeRouteLeave dans les composants :

. (1) Effacer la minuterie dans le composant actuel

Lorsqu'il y a un timer dans un composant, lorsque l'itinéraire est changé, vous pouvez utiliser beforeRouteLeave pour effacer le timer afin d'éviter d'occuper la mémoire :

beforeRouteLeave (to, from, next) {
 window.clearInterval(this.timer) //清楚定时器
 next()
}

(2) Lorsqu'il y a des fenêtres non fermées ou du contenu non enregistré sur la page, empêchez la page de sauter

S'il y a des informations importantes dans la page qui nécessitent que l'utilisateur les enregistre avant de sauter, ou s'il y a une boîte contextuelle, l'utilisateur doit être empêché de sauter

 beforeRouteLeave (to, from, next) {
 //判断是否弹出框的状态和保存信息与否
 if (this.dialogVisibility === true) {
  this.dialogVisibility = false //关闭弹出框
  next(false) //回到当前页面, 阻止页面跳转
 }else if(this.saveMessage === false) {
  alert('请保存信息后退出!') //弹出警告
  next(false) //回到当前页面, 阻止页面跳转
 }else {
  next() //否则允许跳转
 }
}

(3) Enregistrez le contenu pertinent sur Vuex ou Session

Lorsque l'utilisateur doit fermer la page, les informations publiques peuvent être enregistrées dans la session ou dans Vuex

 beforeRouteLeave (to, from, next) {
  localStorage.setItem(name, content); //保存到localStorage中
  next()
}

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

Lecture recommandée :

Comment l'applet WeChat télécharge des images sur le serveur

JS implémente un dégradé transparent de la barre de navigation

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!