prop:
include: 字符串或正則表達(dá)式。只有匹配的組件會被緩存。
exclude: 字符串或正則表達(dá)式。任何匹配的組件都不會被緩存。

// 組件
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 exclude="test-keep-alive">
  <!-- 將不緩存name為test-keep-alive的組件 -->
  <component></component>
</keep-alive>

使用$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>

使用場景
B頁面跳轉(zhuǎn)到A，A頁面需要緩存
C頁面跳轉(zhuǎn)到A，A頁面不需要被緩存
A頁面

{
    path: '/',
    name: 'A',
    component: A,
    meta: {
        keepAlive: true // 需要被緩存
    }
}

B頁面

export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
         // 設(shè)置下一個(gè)路由的 meta
        to.meta.keepAlive = true;  // B 跳轉(zhuǎn)到 A 時(shí)，讓 A 緩存，即不刷新
        next();
    }
};

C頁面

export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
        // 設(shè)置下一個(gè)路由的 meta
        to.meta.keepAlive = false; // C 跳轉(zhuǎn)到 A 時(shí)讓 A 不緩存，即刷新
        next();
    }
};

keep-alive生命周期鉤子函數(shù)：activated、deactivated
使用<keep-alive>會將數(shù)據(jù)保留在內(nèi)存中，如果要在每次進(jìn)入頁面的時(shí)候獲取最新的數(shù)據(jù)，需要在activated階段獲取數(shù)據(jù)，承擔(dān)原來created鉤子中獲取數(shù)據(jù)的任務(wù)。