Cette fois, je vais vous présenter l'utilisation des fonctions hook dans Vue+beforeEnter. Quelles sont les précautions pour utiliser les fonctions hook dans Vue+beforeEnter. Voici des cas pratiques, jetons un coup d'oeil.
Pourquoi avez-vous besoin de créer votre propre fonction de hook beforeEnter ?
Regardez le scénario problématique : il y a une page de liste de mots dans le projet. Chaque cellule indiquera si le mot a été maîtrisé. Cliquez sur la cellule pour accéder à la page de détails, où. vous pouvez apprendre le mot et le marquer. Si le mot est maîtrisé, et vous pouvez également apprendre d'autres mots en cliquant sur les boutons avant et arrière de la page de détails. Ainsi, lorsque je clique sur Retour, la liste de mots doit afficher le dernier statut de tous les utilisateurs de mots.
La relation de la page finale est la suivante :
wordListPage ——> wordDetail (apprendre une série de mots, quitter) ——> )
Pour le scénario ci-dessus, il n'est pas possible d'utiliser la fonction Vue cycle de vie , car les fonctions de cycle de vie de Vue telles que : beforeCreate, créé, avantMonté, monté, etc., sont utilisée uniquement lorsque le composant est initialisé. Elle ne sera appelée que lorsque le composant (instance de VM) provient du cache (comme $route.go(-1), keep-alive), la fonction de cycle de vie ne sera plus appelée. . Par conséquent, lorsque je reviens à la page de liste à partir de la page de détails des mots, je ne trouve pas de période appropriée pour démarrer la mise à jour des données. Par conséquent, le scénario ci-dessus ne peut pas être correctement géré.
Bien sûr, les scénarios ci-dessus sont relativement rares, mais l'existence de la fonction hook beforeEnter est toujours nécessaire.
Construire la fonction hook beforeEnter
Points de connaissance des dépendances :
Routage : vue-router
mixin : mixin 1. Créer un bus d'événements central
Fonction de hook de routage avantEach
Utilisez la fonction de hook beforeEach pour déclencher l'événement beforeEnter du composant correspondant lors du changement de routage.
Le code est le suivant : router/index.js
import Vue from 'vue'; const EventBus = new Vue(); export default EventBus;
Ici, nous implémentons. la surveillance et les composants des événements de changement de route Déclenchement de la fonction de hook d'instance avantEnter.
libs/beforeEnterMixin.js
Pour cet objet mixin, il est possible d'utiliser un mixin global ou local.import EventBus from '@/libs/EventBus'; router.beforeEach((to, from, next) => { //如:EventBus.$emit('homeBeforeEnter'); EventBus.$emit(to.name + 'BeforeEnter'); if (to.matched.some(route => route.meta.isAuth)) { ... next() } else { next() } })
Mix-in global : main.js
4. Utiliser dans des composants
tels que : home.vueimport EventBus from './EventBus'; export default { beforeCreate() { //获取当前路由名称,与前面使用to.name对应 let vmName = this.$route.name; if (!vmName) { return; } // 当组件初始化时,先触发一次,后续将不再调用 this.$options.beforeEnter(); const beforeEnter = vmName + 'BeforeEnter'; //监听路由切换时触发的...BeforeEnter事件 //通过this.$options获取到实例中的beforeEnter钩子函数 //监听到...BeforeEnter事件后,触发钩子函数beforeEnter调用 EventBus.$on(beforeEnter, this.$options.beforeEnter); }, //该函数在这里只作为占位,没有实际意义 beforeEnter() {} };
import beforeEnterMixin from '@/libs/beforeEnterMixin'; Vue.mixin(beforeEnterMixin);
Lecture recommandée :
Explication détaillée de la façon d'implémenter les onglets et les fonctions de commutation dans vue<template> <p> 首页 </p> </template> <script> export default { beforeEnter() { console.log('首页 beforeEnter...'); }, created() { console.log('首页 created...') } } </script>
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!