Cara menggunakan komponen keep-alive untuk mencapai tiada kesan segar semula dalam projek vue

Cara menggunakan komponen keep-alive dalam projek vue untuk mencapai kesan bebas muat semula

Dalam projek Vue, kami sering menghadapi keperluan untuk menukar halaman tetapi mengekalkan status halaman. Pada masa ini, kita boleh menggunakan komponen kekal hidup Vue untuk mencapai kesan tanpa penyegaran. Komponen keep-alive ialah komponen abstrak yang disediakan oleh Vue, yang digunakan untuk cache contoh komponen untuk mengelakkan rendering berulang.

Seterusnya, saya akan mengambil contoh mudah untuk memperkenalkan cara menggunakan keep-alive untuk mencapai kesan tanpa penyegaran.

Pertama, kita perlu membuat projek Vue dan membuat dua halaman dalam projek tersebut, iaitu Laman Utama dan Perihal.

Dalam halaman Utama, kami memaparkan pembilang dengan nilai awal 0. Setiap kali butang diklik, nilai pembilang akan meningkat sebanyak 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>

Dalam halaman Perihal, kami memaparkan nilai pembilang dan menyediakan butang kembali untuk kembali ke halaman Utama.

<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>

Seterusnya, kita perlu menambah komponen kekal hidup pada halaman Laman Utama dan Perihal dalam konfigurasi penghalaan.

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
      }
    }
  ]
});

Di sini, kami menetapkan keep-alive halaman Utama kepada benar, yang menghidupkan cache, dan keep-alive halaman Perihal ditetapkan kepada false, yang mematikan cache.

Akhir sekali, kita perlu menambah komponen keep-alive pada komponen App.vue dan menghidupkan atau mematikan cache secara dinamik mengikut konfigurasi keep-alive laluan.

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

Dengan konfigurasi di atas, kita kini boleh mengklik butang "Tingkatkan" pada halaman Utama, nilai kaunter akan meningkat, dan kemudian melompat ke halaman Perihal, dan kemudian kembali ke halaman Utama, nilai kaunter akan kekal tidak berubah .

Ringkasan:

Melalui contoh di atas, kita dapat melihat bahawa kesan tanpa penyegaran boleh dicapai dengan mudah menggunakan komponen keep-alive. Dengan mengkonfigurasi atribut meta laluan, kami boleh mengawal strategi caching komponen secara fleksibel. Komponen keep-alive ialah pilihan yang baik apabila kita perlu mengekalkan keadaan halaman atau menghalang pemaparan berulang.

Saya harap contoh dalam artikel ini dapat membantu anda memahami dengan lebih baik cara menggunakan komponen keep-alive untuk mencapai kesan bebas muat semula dalam projek Vue. Jika anda mempunyai sebarang pertanyaan, sila tinggalkan mesej untuk perbincangan.

Atas ialah kandungan terperinci Cara menggunakan komponen keep-alive untuk mencapai tiada kesan segar semula dalam projek vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!