Partage récapitulatif des hooks de routage Vue et des 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 et jetons un œil. J'espère que cela pourra aider tout le monde.

1. Syntaxe du hook de routage

Dans le document officiel de vue-router, le hook de routage est traduit par garde de navigation. Vous pouvez également l'envoyer en allant sur le site officiel pour 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. . 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 de départ.
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 une pré-garde globale :

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

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

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

1. vers : Route : l'objet de route cible qui est sur le point d'entrer

2. de : Route : l'itinéraire que la navigation actuelle est 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 des gardes de routage. 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 (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 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é après 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 fermer. sur cette 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 :

Jugez si l'utilisateur est connecté lorsque l'itinéraire Vue saute

Explication détaillée des étapes de mise en œuvre du SPA imbriqué de routage Vue

Un exemple de tutoriel résumant les problèmes de saut de routage 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!