一、
keep-alive
簡介
keep-alive
是Vue内置的一個元件,可以使被包含的元件保留狀态,或避免重新渲染。
用法:
<keep-alive>
<component>
<!-- 該元件将被緩存! -->
</component>
</keep-alive>
props
include-字元串或正規表達式,隻有比對的元件會被緩存
exclude-字元串或正規表達式,任何比對的元件都不會被緩存
//元件 a
export default {
name: 'a',
data () {
return {}
}
}
<keep-alive include="a">
<component>
<!-- name 為 a 的元件将被緩存! -->
</component>
</keep-alive>可以保留它的狀态或避免重新渲染
<keep-alive exclude="a">
<component>
<!-- 除了 name 為 a 的元件都将被緩存! -->
</component>
</keep-alive>可以保留它的狀态或避免重新渲染
遇見vue-router
router-view
也是一個元件,如果直接被包在
keep-alive
裡面,所有路徑比對到的視圖元件都會被緩存:
<keep-alive>
<router-view>
<!-- 所有路徑比對到的視圖元件都會被緩存! -->
</router-view>
</keep-alive>
問題
如果隻想router-view裡面某個元件被緩存,怎麼辦?
1、使用include/exclude
2、增加router.meta屬性
第一種方法上面已經描述,下面說第二種方法
增加router.meta屬性
// routes 配置
export default [
{
path: '/',
name: 'home',
component: Home,
meta: {
keepAlive: true // 需要被緩存
}
}, {
path: '/:id',
name: 'edit',
component: Edit,
meta: {
keepAlive: false // 不需要被緩存
}
}
]
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 這裡是會被緩存的視圖元件,比如 Home! -->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
<!-- 這裡是不被緩存的視圖元件,比如 Edit! -->
</router-view>
《附加》使用 router.meta 拓展
假設這裡有 3 個路由: A、B、C。
需求:
預設顯示 A
B 跳到 A,A 不重新整理
C 跳到 A,A 重新整理
實作方式:
在 A 路由裡面設定 meta 屬性:
{
path: '/',
name: 'A',
component: A,
meta: {
keepAlive: true // 需要被緩存
}
}
在 B 元件裡面設定 beforeRouteLeave:
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 設定下一個路由的 meta
to.meta.keepAlive = true; // 讓 A 緩存,即不重新整理
next();
}
};
在 C 元件裡面設定 beforeRouteLeave:
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 設定下一個路由的 meta
to.meta.keepAlive = false; // 讓 A 不緩存,即重新整理
next();
}
};
這樣便能實作 B 回到 A,A 不重新整理;而 C 回到 A 則重新整理。
總結
路由大法不錯,不需要關心哪個頁面跳轉過來的,隻要 router.go(-1) 就能回去,不需要額外參數。
然而在非單頁應用的時候,keep-alive 并不能有效的緩存了= =