Cara melaksanakan caching laluan melalui komponen keep-alive Vue

Cara melaksanakan caching laluan melalui komponen keep-alive Vue

Apabila menggunakan Vue untuk pembangunan bahagian hadapan, kami sering menghadapi keperluan, iaitu, kami berharap dapat mengekalkan status laluan sebelumnya apabila menukar laluan untuk mencapai pengalaman pengguna yang lebih baik . Vue menyediakan komponen yang dipanggil keep-alive yang boleh membantu kami mencapai keperluan ini.

keep-alive ialah komponen abstrak yang dibina ke dalam Vue, yang boleh dibalut di luar komponen yang perlu dicache, dengan itu mencapai kesan caching komponen. Apabila menggunakan keep-alive dalam penghalaan, anda boleh membungkusnya di luar komponen Seterusnya, mari kita gunakan contoh praktikal untuk menunjukkan cara menggunakan keep-alive untuk melaksanakan caching laluan.

Pertama, kita perlu mencipta projek Vue dan memasang pemalam vue-router. Jalankan arahan berikut dalam baris arahan:

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

Seterusnya, kami mencipta komponen yang dipanggil Home seperti yang ditunjukkan di bawah:

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

Komponen ini memaparkan pembilang dan butang Apabila butang diklik, nilai pembilang akan meningkat oleh 1.

Kemudian, dalam fail konfigurasi penghalaan, kita perlu memperkenalkan komponen Laman Utama dan menetapkan laluan penghalaan.

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;

Dalam fail App.vue, kami membungkus komponen dalam komponen dan menetapkan atribut include supaya komponen Home boleh dicache.

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

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

Di sini, kami menetapkan tatasusunan cachedComponents dan menambah komponen Home pada tatasusunan untuk memberitahu Vue supaya cache komponen semasa menukar laluan.

Akhir sekali, kami memperkenalkan fail konfigurasi penghalaan dalam fail main.js dan mengaitkannya dengan tika Vue.

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

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

Kini, kita boleh cuba menukar laluan, dan kita dapati bahawa apabila bertukar ke laluan lain dan kemudian beralih semula ke laluan Utama, nilai kaunter sebelumnya masih dikekalkan.

Melalui langkah di atas, kami berjaya menggunakan komponen kekal hidup Vue untuk mencapai kesan caching penghalaan. Kami boleh menetapkan secara bebas komponen penghalaan yang perlu dicache mengikut keperluan sebenar.

Ringkasan: Melalui komponen keep-alive Vue, kami boleh melaksanakan caching komponen penghalaan untuk meningkatkan pengalaman pengguna. Apabila menggunakan keep-alive, kita perlu membalut komponen penghalaan dan menetapkan atribut include dalam fail App.vue untuk memberitahu Vue komponen yang hendak dicache. Semoga artikel ini dapat membantu anda!

Atas ialah kandungan terperinci Cara melaksanakan caching laluan melalui komponen keep-alive Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!