Vue+beforeEnter utilise la fonction hook

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 :

1. Routage : vue-router

2. mixin : mixin 1. Créer un bus d'événements central

3. Pour le bus d'événements central, une compréhension simple consiste à créer une instance Vue publique (EventBus) et utilisez la même instance à différents endroits pour déclencher le message EventBus.$emit('demo' ), utilisez une instance publique Vue pour écouter EventBus.$on('demo',() => {}) là où vous souhaitez écoutez l'événement. Pour parler franchement, il existe un tel composant public qui envoie des messages à différents endroits et écoute les messages à différents endroits. Ainsi, l'envoi et la réception de messages sont implémentés par lui-même, c'est pourquoi nous l'appelons le bus d'événements central.

   Le code est le suivant : libs/EventBus.js

Voyons comment l'utiliser

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

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

import 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 :

<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!