keep-alive
參考文章: https://www.cnblogs.com/goloving/p/9256212.html
概念
- <keep-alive>`是Vue的內(nèi)置組件烹玉，能在組件切換過程中將狀態(tài)保留在內(nèi)存中续捂，防止重復(fù)渲染DOM孕荠。
-
<keep-alive>包裹動態(tài)組件時叨橱，會緩存不活動的組件實例，而不是銷毀它們畦韭。 - <keep-alive>
與<transition>相似疼蛾，只是一個抽象組件，它不會在DOM樹中渲染(真實或者虛擬都不會)艺配，也不在父組件鏈中存在察郁，比如：你永遠在this.$parent中找不到keep-alive` 。
應(yīng)用
- 在app.vue中添加keep-alive
<template>
<div class="pb-60">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
-
在router的meta中給需要緩存的組件添加keepAlive
{ path: '/index', component: () => import('@/views/index/index'), meta: { title: '首頁', // 緩存首頁 keepAlive: true } },
