Comment utiliser le composant keep-alive pour obtenir aucun effet de rafraîchissement dans un projet vue

Comment utiliser le composant keep-alive dans un projet Vue pour obtenir un effet sans actualisation

Dans un projet Vue, nous rencontrons souvent le besoin de changer de page tout en conservant l'état de la page. À l'heure actuelle, nous pouvons utiliser le composant keep-alive de Vue pour obtenir un effet sans rafraîchissement. Le composant keep-alive est un composant abstrait fourni par Vue, qui est utilisé pour mettre en cache les instances de composants afin d'éviter un rendu répété.

Ensuite, je prendrai un exemple simple pour présenter comment utiliser keep-alive pour obtenir un effet sans rafraîchissement.

Tout d'abord, nous devons créer un projet Vue et créer deux pages dans le projet, à savoir Accueil et À propos.

Dans la page d'accueil, nous affichons un compteur avec une valeur initiale de 0. A chaque clic sur le bouton, la valeur du compteur augmentera de 1.

<template>
  <div>
    <h2>Home页面</h2>
    <p>计数器: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

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

Dans la page À propos, nous affichons la valeur d'un compteur et fournissons un bouton de retour pour revenir à la page d'accueil.

<template>
  <div>
    <h2>About页面</h2>
    <p>计数器的值: {{ count }}</p>
    <button @click="goBack">返回</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

Ensuite, nous devons ajouter des composants keep-alive aux pages Accueil et À propos de la configuration de routage.

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/views/Home.vue'),
      meta: {
        keepAlive: true // 设置keep-alive为true
      }
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('@/views/About.vue'),
      meta: {
        keepAlive: false // 设置keep-alive为false
      }
    }
  ]
});

Ici, nous définissons le keep-alive de la page d'accueil sur true, ce qui active le cache, et le keep-alive de la page À propos est défini sur false, ce qui désactive le cache.

Enfin, nous devons ajouter le composant keep-alive au composant App.vue et activer ou désactiver dynamiquement le cache en fonction de la configuration keep-alive de la route.

<template>
  <div id="app">
    <keep-alive>
      <router-view :key="$route.fullPath"></router-view>
    </keep-alive>
  </div>
</template>

Avec la configuration ci-dessus, nous pouvons maintenant cliquer sur le bouton "Augmenter" sur la page d'accueil, la valeur du compteur augmentera, puis passer à la page À propos, puis revenir à la page d'accueil, la valeur du compteur restera inchangée .

Résumé :

À travers les exemples ci-dessus, nous pouvons voir que l'effet sans rafraîchissement peut être facilement obtenu en utilisant le composant keep-alive. En configurant l'attribut méta de la route, nous pouvons contrôler de manière flexible la stratégie de mise en cache du composant. Le composant keep-alive est un bon choix lorsque nous devons maintenir l'état de la page ou empêcher les rendus répétés.

J'espère que les exemples de cet article pourront vous aider à mieux comprendre comment utiliser les composants keep-alive pour obtenir des effets sans actualisation dans les projets Vue. Si vous avez des questions, veuillez laisser un message pour en discuter.

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!