Explication détaillée d'exemples de hooks de routage Vue et de scénarios d'application

Cet article présente principalement l'explication détaillée des hooks de routage Vue et des scénarios d'application (résumé). L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

1. Syntaxe du crochet de routage

Dans le document officiel de vue-router, le crochet de routage est traduit par garde de navigation. Ce qui suit est un résumé du contenu du document. sur le site officiel via le portail. Lire les détails

Hooks de routage

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

De manière générale, Vue propose trois principaux types de hooks

1 Hooks globaux
2 Hooks exclusifs à un certain itinéraire
3. crochets de composants

Les trois crochets de routage impliquent trois paramètres. Passons directement à l'introduction officielle ici

à : Route : l'objet de routage cible qui est sur le point d'être saisi
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 (global router hook)

Vous pouvez utiliser router.beforeEach pour enregistrer un front guard global :

const router = new VueRouter({ ... })

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

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

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

2. de : Itinéraire : l'itinéraire sur lequel se trouve la navigation actuelle sur le point de partir

3. 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

Remarque : lorsque vous utilisez le hook de routage global, assurez-vous d'appeler next()!!!

( 2). Exclusif aux gardes de routage (hooks in-route)

Vous pouvez définir directement les gardes beforeEnter dans la configuration de la route :

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

Les paramètres de méthode de ces gardes sont les mêmes que ceux-là. de pré-gardes mondiales.

(3). Gardes au sein du composant (crochet au sein du composant)

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

1. beforeRouteEnter

2. beforeRouteUpdate (2.2 nouveau)

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`
 }
}

deux . Scénarios d'application des hooks de routage dans le développement réel

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

(1) Effacer la minuterie dans le composant actuel

Lorsqu'il y a une minuterie dans un composant, lorsque l'itinéraire est changé, vous pouvez utiliser beforeRouteLeave pour effacer la minuterie afin d'éviter que la mémoire soit occupée :

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é dans la page, empêchez la page de sauter

S'il y a des informations importantes dans la page dont l'utilisateur a besoin Le saut ne peut être effectué qu'après lors de l'enregistrement, ou il peut y avoir une boîte contextuelle. Les utilisateurs ne doivent pas pouvoir 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 dans Vuex ou Session

lorsque l'utilisateur doit le fermer. Page, vous pouvez enregistrer des informations publiques dans une session ou Vuex

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

Recommandations associées :

Explication détaillée du routage vue-router et de la navigation inter-pages

Méthode de mise en œuvre de la vérification de l'itinéraire de connexion à vue

Explication détaillée de la vérification de l'itinéraire et de l'utilisation de l'interception correspondante dans vue

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!