Cara melaksanakan caching peringkat halaman melalui komponen keep-alive vue
Pengenalan:
Apabila membangun dengan Vue, anda sering menghadapi situasi di mana anda perlu cache halaman untuk meningkatkan kelajuan pemuatan halaman dan pengalaman pengguna. Komponen kekal hidup dalam Vue boleh membantu kami melaksanakan caching peringkat halaman, supaya halaman tertentu dapat mengekalkan keadaan dan datanya apabila bertukar. Artikel ini akan memperkenalkan cara menggunakan komponen keep-alive Vue untuk melaksanakan caching peringkat halaman.
<keep-alive>
<router-view></router-view>
</keep-alive>
Salin selepas log masuk
Dalam kod di atas, komponen <.router-view>
diaktifkan: Dipanggil apabila komponen diaktifkan, iaitu apabila ia pergi dari cache ke keadaan diaktifkan.
dinyahaktifkan: Dipanggil apabila komponen dicache, iaitu dipanggil daripada pengaktifan kepada keadaan cache.
Dalam kod di atas, kami menambah acara yang diaktifkan dan dinyahaktifkan pada komponen
Caching halaman
Apabila menggunakan komponen keep-alive, kita boleh mengawal halaman mana yang dicache dengan menambahkan medan meta pada konfigurasi penghalaan. Contohnya:
const route = [
{
<keep-alive>
<router-view v-on:activated="onActivated"
v-on:deactivated="onDeactivated">
</router-view>
</keep-alive>},
{onActivated() {
// 组件被激活时的逻辑处理
},
onDeactivated() {
// 组件被缓存时的逻辑处理
}
Kemudian, hantar medan meta ke komponen keep-alive melalui arahan v-bind pada komponen
path: '/',
name: 'Home',
component: Home,
meta: { keepAlive: true } // 需要进行缓存Salin selepas log masuk
Dalam kod di atas, kami menghantar medan meta.keepAlive melalui bahagian keep-alive -bind, dan Gunakan v-if dalam komponen keep-alive untuk menentukan sama ada komponen cache diperlukan. . / template>
<script><p>eksport lalai {</p> dikira: {<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>path: '/about', name: 'About', component: About, meta: { keepAlive: false } // 不需要进行缓存</pre><div class="contentsignin">Salin selepas log masuk</div></div><br>}}<p></script>Atas ialah kandungan terperinci Cara melaksanakan caching peringkat halaman melalui komponen keep-alive Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
