Utilisation des fonctions de routage et de hook dans Vue2.X

Ci-dessous, je partagerai avec vous une explication détaillée des fonctions de routage et de hook basées sur Vue2.X ​​Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

J'ai été un peu occupé au travail ces derniers temps, je n'ai pas mis à jour mes articles depuis longtemps et je n'ai rien appris de nouveau.

Parlons de ce crochet de routage aujourd'hui.

Fonctions de navigation et de crochet :

Navigation : l'itinéraire change Mots clés : changements d'itinéraire

Fonction de crochet : dans un nœud différent les fonctions sont appelées à différentes étapes du changement de route (à mon avis, la fonction hook est : une fonction déclenchée par un certain nœud et un certain timing).

La fonction hook est principalement utilisée pour intercepter la navigation, la laisser terminer le saut ou l'annuler, et exécuter différentes fonctions à différentes étapes de la navigation. Enfin, le résultat de l'exécution de la fonction hook indiquera à la navigation quoi. faire. .

La navigation attend que tous les hooks soient résolus, attendant que la fonction hook lui dise quoi faire ensuite. Utilisez next() pour spécifier.

Laissez-moi vous donner un exemple de connexion

router.beforeEach(({meta, path}, from, next) => {　　 
 
　　const {auth = true} = meta  // meta代表的是to中的meta对象，path代表的是to中的path对象 
 
　　var isLogin = Boolean(store.state.user.id) // true用户已登录， false用户未登录　 
　　 
　　if (auth && !isLogin && path !== '/login') { // auth 代表需要通过用户身份验证，默认为true，代表需要被验证， false为不用检验 
　　　　return next({ path: '/login' }) // 跳转到login页面 
　　} 
 
 
　　next() // 进行下一个钩子函数 
})

Laissez-moi d'abord parler de la fonction hook beforeEach, c'est un avant global La fonction Hook (avant chacun) signifie qu'elle doit être exécutée à chaque changement d'itinéraire.

Ses trois paramètres :

vers : (Objet de routage d'itinéraire) L'objet de routage cible qui s'apprête à entrer Attributs sous l'objet to : path params query hash fullPath matched name meta (sous matched, mais cet exemple peut être utilisé directement)

from: (objet de routage d'itinéraire) La navigation actuelle concerne quitter La route

suivant : (Fonction fonction) doit appeler cette méthode pour résoudre ce hook. Méthode d'appel : next (paramètre ou vide) ***Doit appeler

next (sans paramètres) : passez au hook suivant dans le pipeline. Si vous atteignez la dernière fonction de hook, l'état de navigation est confirmé (Confirmé). )

next('/') ou next({ path: '/' }) : Accédez à une autre adresse. La navigation en cours est interrompue et une nouvelle navigation démarre.

Le hook global afterEach de la fonction global hook :

after Le hook n'a pas de méthode next et ne peut pas changer la navigation. la navigation a été déterminée. Après l'exécution, il y a une fonction hook d'exécution attachée

Fonction Hook dans le composant : (beforeRouteEnter et beforeRouteLeave plus une fonction watch)

In le composant vue2.X La fonction hook est beaucoup plus petite que vue1.X. .

Utilisez la propre fonction de hook de cycle de vie du composant pour remplacer l'activation et la désactivation

Utilisez un observateur sur $router pour répondre aux changements d'itinéraire

canActivate peut être utilisé par beforeEnter dans le configuration du routeur L'implémentation de

canDeactivate a été remplacée par beforeRouteLeave, qui est spécifié dans la définition au niveau racine d'un composant. Cette fonction hook est appelée avec l'instance du composant comme contexte.

canReuse a été supprimé car il prêtait à confusion et rarement utilisé.

Utilisez ajax pour obtenir les données (vers, depuis, suivant) et utilisez plutôt beforeRouteEnter (vers, depuis, suivant) dans le composant

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utilisé à l'avenir.

Articles associés :

Problèmes inter-domaines de ProxyTable dans le projet vue-cli

Comment utiliser les références dans les composants React

Explication détaillée de l'utilisation de devtool dans webpack

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!