Implémentation de la fonction de cache keep-alive de vue

Cet article présente principalement l'implémentation de la fonction de cache keep-alive de vue. Maintenant, je le partage avec vous et le donne comme référence.

Vue implémente la mise en cache des informations sur les composants

Lorsque nous développons un projet Vue, il est inévitable que les données des composants soient perdues après le changement d'itinéraire vers d'autres composants et puis renvoyé. Rechargement, pour gérer cette situation, nous devons utiliser keep-alive pour mettre en cache les informations sur les composants de vue afin qu'elles ne soient pas rechargées.

1. Dans app.vue

<keep-alive>
  <router-view></router-view>
</keep-alive>

Mais dans ce cas, Tous Les composants seront mis en cache et l'effet de mise en cache d'un seul composant ne peut pas être obtenu.

Ensuite, nous ajoutons quelques composants et la méthode d'implémentation est la suivante :

dans app.vue

<!--这里是需要keepalive的-->
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
<keep-alive>

<!-- 这里不会被keepAlive -->

<router-view v-if="!$route.meta.keepAlive"></router-view>

2. Dans la page index.js de la route,

{
  path: '',
  name: '',
  component: '',
  meta: {keepAlive: true}   // 这个是需要keepalive的
}，
{
  path: '',
  name: '',
  component: ,
  meta: {keepAlive: false}  // 这是不会被keepalive的
}

Ceci réalise la mise en cache de certains composants Fonction

Si le composant mis en cache souhaite effacer les données ou effectuer une méthode d'initialisation, appelez la fonction hook activée lors du chargement du composant, comme suit :

activated: function () {
  this.data = ‘'
}

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

Articles associés :

Un module d'enregistrement des utilisateurs ajax très pratique

Cliquez Ajax pour charger en continu la liste des données (graphique tutoriel)

Ajax+Struts2 implémente la fonction de vérification du code de vérification (tutoriel image et texte)

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!