一敞掘、使用情景
在使用Vue開發(fā)單頁面應(yīng)用時(shí)，我們通常會(huì)使用Vue-Router進(jìn)行頁面導(dǎo)航，Vue-Router在進(jìn)行路由切換的時(shí)候，頁面是會(huì)重新加載趴久，對應(yīng)的生命周期函數(shù)也會(huì)再次執(zhí)行一遍，但是在有些業(yè)務(wù)場景下搔确，
比如：
- 在有分頁數(shù)據(jù)列表中彼棍，切換到第三頁需要查看列表對應(yīng)數(shù)據(jù)的詳情頁面，然后返回妥箕，如果不加任何處理滥酥，列表頁面會(huì)重新加載，默認(rèn)顯示第一頁數(shù)據(jù)畦幢，而不在是之前的第三頁坎吻，這樣如果還需要查看之前查看數(shù)據(jù)的下一條時(shí)，還需要切換到第三頁宇葱，如此反復(fù)瘦真。
- 在列表頁面進(jìn)行條件篩選查詢，查詢到對應(yīng)的數(shù)據(jù)后查詢詳情黍瞧，跳轉(zhuǎn)詳情頁面诸尽，然后在返回，列表默認(rèn)會(huì)清空查詢條件印颤，顯示所有數(shù)據(jù)您机。
以上兩種情景都會(huì)帶來很不好的用戶體驗(yàn)。此時(shí)年局，就需要對列表頁面進(jìn)行路由緩存际看。在Vue-Router中可以使用keep-alive進(jìn)行路由頁面緩存。
二矢否、keep-alive基本認(rèn)識(shí)
-
Vue中提供了一個(gè)內(nèi)置組件keep-alive仲闽，使用<keep-alive>元素將動(dòng)態(tài)組件包裹起來，內(nèi)部組件就會(huì)被緩存起來僵朗。 -
<keep-alive>包裹的組件赖欣，加載過的頁面屑彻，再次進(jìn)入時(shí)，是不會(huì)執(zhí)行頁面第一次進(jìn)入時(shí)的部分生命周期函數(shù)顶吮。 -
<keep-alive>包裹的組件會(huì)新增兩個(gè)生命周期函數(shù)activated和deactivated. - 兩個(gè)屬性
include和exclude可以讓<keep-alive>實(shí)現(xiàn)有條件的進(jìn)行緩存社牲。include包含的組件會(huì)被進(jìn)行緩存，exclude包含的組件不會(huì)被緩存悴了。
三膳沽、keep-alive實(shí)現(xiàn)路由頁面緩存
通過keep-alive實(shí)現(xiàn)路由頁面緩存有兩種如下兩種方式：
（一）、使用include控制需要緩存的頁面
// home.vue
<template>
<div>
...
<keep-alive :include='cashViews'>
<router-view></router-view>
</keep-alive>
</div>
</template>
<script>
export default{
data() {
return {
// 要緩存的組件
cashViews: ['list']
}
}
}
</script>
// list.vue
<script>
export default{
// 在組件內(nèi)路由守衛(wèi)鉤子函數(shù)中處理邏輯
beforeRouteEnter (to, from, next) {
if (from.name === 'Index') { // 處理頁面緩存后让禀，返回首頁再次進(jìn)入緩存頁時(shí)數(shù)據(jù)為更新
// 該生命周期無法獲取到this，因此把vm實(shí)例當(dāng)作參數(shù)傳遞
next(vm => {
vm.pages.pageNum = 1
// 因?yàn)槲疫@里查詢表單是動(dòng)態(tài)的陨界，所以首頁進(jìn)入時(shí)需要調(diào)用一次巡揍，在改方法中請求返回后調(diào)用了獲取列表數(shù)據(jù)getTableDatas方法
vm.getQueryList()
})
} else if (!from.name) { // 處理刷新頁面時(shí)，獲取動(dòng)態(tài)表單方法未執(zhí)行菌瘪，導(dǎo)致表單無法加載
next(vm => {
vm.getQueryList()
})
} else {
// 詳情返回時(shí)只更新列表數(shù)據(jù)腮敌，因?yàn)槿绻谠斍轫撁孀隽瞬僮鳎斜頂?shù)據(jù)狀態(tài)會(huì)改變俏扩，其他使用緩存
next(vm => {
vm.getTableDatas()
})
}
}
}
</script>
以上實(shí)現(xiàn)糜工，是針對我自己項(xiàng)目業(yè)務(wù)場景的實(shí)現(xiàn)，如果查詢表單不是動(dòng)態(tài)獲取的录淡，是頁面寫死的捌木，可以在activated鉤子中調(diào)用查詢列表數(shù)據(jù)方法。這樣每次進(jìn)入的緩存頁面的時(shí)候嫉戚，只會(huì)更新列表數(shù)據(jù)刨裆，不會(huì)改變其他緩存。
問題：同樣會(huì)存在彬檀，列表緩存數(shù)據(jù)后帆啃，返回首頁，再次進(jìn)入列表頁面窍帝，緩存數(shù)據(jù)還在努潘，這樣可以在路由守衛(wèi)beforeRouterLeave鉤子中處理。
activated() {
this.getTableDatas()
},
beforeRouterLeave(to, from, next) {
if (from.name === 'Index') {
// 如果從首頁進(jìn)入時(shí)調(diào)用重置方法
this.reset()
}
}
-
兩點(diǎn)注意：
- 要緩存的路由組件必須設(shè)置
name屬性坤学，跟cashViews中的值對應(yīng)疯坤； - 如果要緩存的組件比較多時(shí)，可以使用
vuex管理cashViews拥峦。
- 要緩存的路由組件必須設(shè)置
（二)贴膘、根據(jù)v-if控制顯示的router-view
- 在路由表
routes中配置meta屬性，新增keepAlive屬性略号，需要緩存的頁面設(shè)置keepAlive為true.
{
path: '/list',
name: 'List',
component: List,
meta: {
keepAlive: true
}
}
- 根據(jù)當(dāng)前訪問路由的
keepAlive值控制是否緩存組件
// home.vue
<template>
...
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</template>
- 在組件的守衛(wèi)鉤子中修改
keepAlive的值刑峡，控制頁面緩存與否
// List.vue
export default {
/* 從List組件離開時(shí),修改keepAlive值為false洋闽，保證進(jìn)入該頁面時(shí)頁面刷新
*/
beforeRouteLeave(to, from, next) {
from.meta.keepAlive = false
next()
}
}
// Detail.vue
export default {
/*從Detail返回List時(shí)，修改List的keepAlive為true,確保返回List頁面時(shí)使用緩存不刷新頁面
*/
beforeRouteLeave(to, from, next){
if(to.name === 'List') {
to.meta.keepAlive = true
}
next()
}
}
