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鉤子中獲取數據的任務。