https://www.cnblogs.com/sysuhanyf/p/7454530.html
<keep-alive>是Vue的內置組件，能在組件切換過程中將狀態保留在內存中，防止重復渲染DOM。
<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在父組件鏈中。
prop:
include: 字符串或正則表達式。只有匹配的組件會被緩存。
exclude: 字符串或正則表達式。任何匹配的組件都不會被緩存。
在2.1.0版本Vue中
常見用法：
// 組件
export default {
? name: 'test-keep-alive',
? data () {
? ? return {
? ? ? ? includedComponents: "test-keep-alive"
? ? }
? }
}
<keep-alive include="test-keep-alive">
? <!-- 將緩存name為test-keep-alive的組件 -->
? <component></component>
</keep-alive>
<keep-alive include="a,b">
? <!-- 將緩存name為a或者b的組件，結合動態組件使用 -->
? <component :is="view"></component>
</keep-alive>
<!-- 使用正則表達式，需使用v-bind -->
<keep-alive :include="/a|b/">
? <component :is="view"></component>
</keep-alive>
<!-- 動態判斷 -->
<keep-alive :include="includedComponents">
? <router-view></router-view>
</keep-alive>
<keep-alive exclude="test-keep-alive">
? <!-- 將不緩存name為test-keep-alive的組件 -->
? <component></component>
</keep-alive>
結合router，緩存部分頁面
使用$route.meta的keepAlive屬性：
<keep-alive>
? ? <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
需要在router中設置router的元信息meta：
//...router.js
export default new Router({
? routes: [
? ? {
? ? ? path: '/',
? ? ? name: 'Hello',
? ? ? component: Hello,
? ? ? meta: {
? ? ? ? keepAlive: false // 不需要緩存
? ? ? }
? ? },
? ? {
? ? ? path: '/page1',
? ? ? name: 'Page1',
? ? ? component: Page1,
? ? ? meta: {
? ? ? ? keepAlive: true // 需要被緩存
? ? ? }
? ? }
? ]
})
使用效果
以上面router的代碼為例：
<!-- Page1頁面 -->
<template>
? <div class="hello">
? ? <h1>Vue</h1>
? ? <h2>{{msg}}</h2>
? ? <input placeholder="輸入框"></input>
? </div>
</template>
<!-- Hello頁面 -->
<template>
? <div class="hello">
? ? <h1>{{msg}}</h1>
? </div>
</template>
(1) 在Page1頁面輸入框輸入“asd”，然后手動跳轉到Hello頁面；
(2) 回到Page1頁面發現之前輸入的"asd"依然保留，說明頁面信息成功保存在內存中；
借鑒一下 vue-router 之 keep-alive，作者：RoamIn這篇博客中的例子：
首頁是A頁面
B頁面跳轉到A，A頁面需要緩存
C頁面跳轉到A，A頁面不需要被緩存
思路是在每個路由的beforeRouteLeave(to, from, next)鉤子中設置to.meta.keepAlive：
A的路由：
{
? ? path: '/',
? ? name: 'A',
? ? component: A,
? ? meta: {
? ? ? ? keepAlive: true // 需要被緩存
? ? }
}
export default {
? ? data() {
? ? ? ? return {};
? ? },
? ? methods: {},
? ? beforeRouteLeave(to, from, next) {
? ? ? ? // 設置下一個路由的 meta
? ? ? ? to.meta.keepAlive = true;? // B 跳轉到 A 時，讓 A 緩存，即不刷新
? ? ? ? next();
? ? }
};
export default {
? ? data() {
? ? ? ? return {};
? ? },
? ? methods: {},
? ? beforeRouteLeave(to, from, next) {
? ? ? ? // 設置下一個路由的 meta
? ? ? ? to.meta.keepAlive = false; // C 跳轉到 A 時讓 A 不緩存，即刷新
? ? ? ? next();
? ? }
};
親測有效哦~
keep-alive生命周期鉤子函數：activated、deactivated
使用<keep-alive>會將數據保留在內存中，如果要在每次進入頁面的時候獲取最新的數據，需要在activated階段獲取數據，承擔原來created鉤子中獲取數據的任務。
