Vue-Router 實現前端頁面緩存
一、使用情景
在使用Vue
開發單頁面應用時,我們通常會使用Vue-Router
進行頁面導航,Vue-Router
在進行路由切換的時候,頁面是會重新加載,對應的生命週期函數也會再次執行一遍,但是在有些業務場景下。
比如:
在有分頁數據列表中,切換到第三頁需要查看列表對應數據的詳情頁面,然後返回,如果不加任何處理,列表頁面會重新加載,默認顯示第一頁數據,而不在是之前的第三頁,這樣如果還需要查看之前查看數據的下一條時,還需要切換到第三頁,如此反覆。
在列表頁面進行條件篩選查詢,查詢到對應的數據後查詢詳情,跳轉詳情頁面,然後在返回,列表默認會清空查詢條件,顯示所有數據。
以上兩種情景都會帶來很不好的用戶體驗。此時,就需要對列表頁面進行路由緩存。在Vue-Router
中可以使用keep-alive
進行路由頁面緩存。
二、keep-alive 基本認識
Vue
中提供了一個內置組件keep-alive
,使用<keep-alive>
元素將動態組件包裹起來,內部組件就會被緩存起來。
<keep-alive>
包裹的組件,加載過的頁面,再次進入時,是不會執行頁面第一次進入時的部分生命週期函數。
<keep-alive>
包裹的組件會新增兩個生命週期函數activated
和deactivated
.
兩個屬性include
和exclude
可以讓<keep-alive>
實現有條件的進行緩存。include
包含的組件會被進行緩存,exclude
包含的組件不會被緩存。
三、keep-alive 實現路由頁面緩存
通過keep-alive
實現路由頁面緩存有兩種如下兩種方式:
(一)使用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{
// 在組件內路由守衛鉤子函數中處理邏輯
beforeRouteEnter (to, from, next) {
if (from.name === 'Index') { // 處理頁面緩存後,返回首頁再次進入緩存頁時數據爲更新
// 該生命週期無法獲取到this,因此把vm實例當作參數傳遞
next(vm => {
vm.pages.pageNum = 1
// 因爲我這裏查詢表單是動態的,所以首頁進入時需要調用一次,在改方法中請求返回後調用了獲取列表數據getTableDatas方法
vm.getQueryList()
})
} else if (!from.name) { // 處理刷新頁面時,獲取動態表單方法未執行,導致表單無法加載
next(vm => {
vm.getQueryList()
})
} else {
// 詳情返回時只更新列表數據,因爲如果在詳情頁面做了操作,列表數據狀態會改變,其他使用緩存
next(vm => {
vm.getTableDatas()
})
}
}
}
</script>
以上實現,是針對我自己項目業務場景的實現,如果查詢表單不是動態獲取的,是頁面寫死的,可以在activated
鉤子中調用查詢列表數據方法。這樣每次進入的緩存頁面的時候,只會更新列表數據,不會改變其他緩存。
問題
:同樣會存在,列表緩存數據後,返回首頁,再次進入列表頁面,緩存數據還在,這樣可以在路由守衛beforeRouterLeave
鉤子中處理。
兩點注意:
要緩存的路由組件必須設置name
屬性,跟cashViews
中的值對應;
如果要緩存的組件比較多時,可以使用vuex
管理cashViews
。
(二) 根據v-if
控制顯示的router-view
- 在路由表
routes
中配置meta
屬性,新增keepAlive
屬性,需要緩存的頁面設置keepAlive
爲true
.
- 根據當前訪問路由的
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>
- 在組件的守衛鉤子中修改
keepAlive
的值,控制頁面緩存與否
// List.vue
export default {
/* 從List組件離開時,修改keepAlive值爲false,保證進入該頁面時頁面刷新
*/
beforeRouteLeave(to, from, next) {
from.meta.keepAlive = false
next()
}
}
// Detail.vue
export default {
/*從Detail返回List時,修改List的keepAlive爲true,確保返回List頁面時使用緩存不刷新頁面
*/
beforeRouteLeave(to, from, next){
if(to.name === 'List') {
to.meta.keepAlive = true
}
next()
}
}
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/cg0OvQ7JkU8Gtu8BIJF6kA