Utilisez la fonction de hook beforeEnter (code ci-joint)

Cette fois, je vais vous présenter l'utilisation de la fonction hook beforeEnter (avec code) et quelles sont les précautions d'utilisation de la fonction hook beforeEnter (ce qui suit est un cas pratique, jetons un coup d'œil.

Pourquoi 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, et chaque cellule indiquera si le mot a été maîtrisé. Cliquez sur la cellule pour accéder à la page de détails. Vous pouvez apprendre le mot et indiquer s'il est maîtrisé, et vous pouvez également apprendre d'autres mots en cliquant sur les boutons avant et arrière dans la page de détails. , la liste de mots doit afficher le dernier statut de tous les mots maîtrisés par l'utilisateur. 🎜>

La relation de la page finale est la suivante :

wordListPage ——> une série de mots, quittez) ——> wordListPage (actualiser la liste de mots)

Pour le scénario ci-dessus, il n'est pas possible d'utiliser les fonctions de cycle de vie de Vue, car les fonctions de cycle de vie de Vue telles que : beforeCreate, créé, beforeMounted, monté, etc. ne sera appelé que lorsque le composant est initialisé, mais lorsque le composant (instance de VM) provient du cache (comme $route.go(-1), keep-alive), le cycle de vie la fonction ne sera plus appelée. Par conséquent, lorsque je reviens à la page de liste à partir de la page de détails du mot, je ne trouve pas de période appropriée pour lancer la mise à jour des données, donc le scénario ci-dessus ne peut pas être bien géré

Bien sûr, le scénario ci-dessus est relativement rare, mais la fonction de hook beforeEnter existe. Il est toujours nécessaire de construire la fonction de hook beforeEnter

Points de connaissance dépendants :

routage : vue-router

1. Mixin : mixin

2. Bus événementiel central
1 .Créer un bus d'événements central

Pour le bus d'événements central, une compréhension simple consiste à créer une instance publique de Vue (EventBus) et à utiliser la même instance dans différents endroits pour déclencher le message EventBus.$emit('demo'), utilisez une instance publique de Vue pour écouter EventBus.$on('demo',() => {}) où vous souhaitez écouter l'événement. plus clairement, il existe un tel composant public, et ce sera différent. Il envoie des messages et les surveille à différents endroits. Par conséquent, il implémente lui-même l'envoi et la réception de messages, nous l'appelons donc le bus d'événements central. Le code est le suivant : libs/EventBus.js

Voyons comment l'utiliser

2. Fonction de hook de routage avant que chaque

import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;

ne soit utilisé. la fonction hook beforeEach pour déclencher la réponse lors du changement de routage L'événement beforeEnter du composant.

Le code est le suivant : router/index.js

3 Créez un objet mix-in global

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()
  }
  
})

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.

Mix-in global : main.js

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() {}
};

4. Utiliser dans des composants

import beforeEnterMixin from '@/libs/beforeEnterMixin';
Vue.mixin(beforeEnterMixin);

tels que : home.vue

À ce stade, notre beforeEnter est terminé. Vous pouvez faire une démo pour le tester vous-même. Actuellement, je l'utilise dans de nombreux projets.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

<template>
  <p>
    首页
  </p>
</template>
<script>
export default {
  beforeEnter() {
    console.log('首页 beforeEnter...');
  },
  created() {
    console.log('首页 created...')
  }
}
</script>

Lecture recommandée :

Comment utiliser vue+webpack pour effectuer un chargement asynchrone

opération de routage dynamique du routeur vue sous- itinéraire

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!