Comment implémenter la mise en cache des routes via le composant keep-alive de Vue

Comment implémenter la mise en cache des routes via le composant keep-alive de Vue

Lorsque nous utilisons Vue pour le développement front-end, nous rencontrons souvent un besoin, c'est-à-dire que nous espérons conserver le statut de la route précédente lors du changement de route pour obtenir une meilleure expérience utilisateur . Vue fournit un composant appelé keep-alive qui peut nous aider à atteindre cette exigence.

keep-alive est un composant abstrait intégré à Vue, qui peut être enveloppé en dehors du composant qui doit être mis en cache pour obtenir l'effet de mise en cache du composant. Lorsque vous utilisez keep-alive dans le routage, vous pouvez l'envelopper en dehors du composant Utilisons ensuite un exemple pratique pour montrer comment utiliser keep-alive pour implémenter la mise en cache des routes.

Tout d'abord, nous devons créer un projet Vue et installer le plugin vue-router. Exécutez la commande suivante dans la ligne de commande :

vue create router-cache-demo
cd router-cache-demo
npm install vue-router

Ensuite, nous créons un composant appelé Accueil comme indiqué ci-dessous :

<template>
  <div>
    <h1>Home</h1>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

Ce composant affiche un compteur et un bouton Lorsque vous cliquez sur le bouton, la valeur du compteur sera augmentée. par 1.

Ensuite, dans le fichier de configuration de routage, nous devons introduire le composant Home et définir le chemin de routage.

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
];

const router = new VueRouter({
  routes
});

export default router;

Dans le fichier App.vue, nous enveloppons le composant dans le composant et définissons l'attribut include afin que le composant Home puisse être mis en cache.

<template>
  <div id="app">
    <keep-alive :include="cachedComponents">
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cachedComponents: ['Home']
    };
  }
};
</script>

Ici, nous définissons le tableau cachedComponents et ajoutons le composant Home au tableau pour indiquer à Vue de mettre en cache le composant lors du changement d'itinéraire.

Enfin, nous introduisons le fichier de configuration de routage dans le fichier main.js et l'associons à l'instance Vue.

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

Maintenant, nous pouvons essayer de changer d'itinéraire, et nous pouvons constater que lorsque nous passons à d'autres itinéraires puis revenons à l'itinéraire d'origine, la valeur précédente du compteur est toujours conservée.

Grâce aux étapes ci-dessus, nous avons utilisé avec succès le composant keep-alive de Vue pour obtenir l'effet de mise en cache de routage. Nous pouvons définir librement les composants de routage qui doivent être mis en cache en fonction des besoins réels.

Résumé : Grâce au composant keep-alive de Vue, nous pouvons implémenter la mise en cache des composants de routage pour améliorer l'expérience utilisateur. Lors de l'utilisation de keep-alive, nous devons encapsuler le composant de routage et définir l'attribut include dans le fichier App.vue pour indiquer à Vue quels composants mettre en cache. J'espère que cet article vous sera utile !

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!