Comment vue+keep-alive exploite le cache du site Web

Cette fois, je vais vous montrer comment faire fonctionner le cache du site avec vue+keep-alive. Quelles sont les précautions pour faire fonctionner le cache du site avec vue+keep-alive ? Voici un cas pratique, jetons un oeil.

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 ne pourront pas atteindre un seul composant. effet.

Ensuite, nous ajoutons quelques composants. 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 l'index de routage. .js

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

Cela réalise la fonction de mise en cache de certains composants

Si le composant mis en cache souhaite effacer les données ou exécuter la méthode d'initialisation, chargez le composant. Lorsque vous appelez la fonction hook activée, comme suit :

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

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 chinois PHP. site web!

Lecture recommandée :

Utiliser vue-route+beforeEach pour créer des gardes de navigation

Comment Webpack gère la mise en cache

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!