在有分頁數據列表中，切換到第三頁需要查看列表對應數據的詳情頁面，然后返回，如果不加任何處理，列表頁面會重新加載，默認顯示第一頁數據，而不在是之前的第三頁，這樣如果還需要查看之前查看數據的下一條時，還需要切換到第三頁，如此反復。
在列表頁面進行條件篩選查詢，查詢到對應的數據后查詢詳情，跳轉詳情頁面，然后在返回，列表默認會清空查詢條件，顯示所有數據。

以上兩種情景都會帶來很不好的用戶體驗。此時，就需要對列表頁面進行路由緩存。在Vue-Router中可以使用keep-alive進行路由頁面緩存。

2.keep-alive基本認識

Vue中提供了一個內置組件keep-alive，使用<keep-alive>元素將動態(tài)組件包裹起來，內部組件就會被緩存起來。
<keep-alive>包裹的組件，加載過的頁面，再次進入時，是不會執(zhí)行頁面第一次進入時的部分生命周期函數。
<keep-alive>包裹的組件會新增兩個生命周期函數activated和deactivated.
兩個屬性include和exclude可以讓<keep-alive>實現有條件的進行緩存。include包含的組件會被進行緩存，exclude包含的組件不會被緩存。

3.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{
? ? // 在組件內路由守衛(wèi)鉤子函數中處理邏輯
? ? beforeRouteEnter (to, from, next) {
? ? ? if (from.name === 'Index') { // 處理頁面緩存后，返回首頁再次進入緩存頁時數據為更新
? ? ? ? // 該生命周期無法獲取到this，因此把vm實例當作參數傳遞
? ? ? ? next(vm => {
? ? ? ? ? vm.pages.pageNum = 1
? ? ? ? ? // 因為我這里查詢表單是動態(tài)的，所以首頁進入時需要調用一次，在改方法中請求返回后調用了獲取列表數據getTableDatas方法
? ? ? ? ? vm.getQueryList()
? ? ? ? })
? ? ? } else if (!from.name) { // 處理刷新頁面時，獲取動態(tài)表單方法未執(zhí)行，導致表單無法加載
? ? ? ? next(vm => {
? ? ? ? ? vm.getQueryList()
? ? ? ? })
? ? ? } else {
? ? ? ? // 詳情返回時只更新列表數據，因為如果在詳情頁面做了操作，列表數據狀態(tài)會改變，其他使用緩存
? ? ? ? next(vm => {
? ? ? ? ? vm.getTableDatas()
? ? ? ? })
? ? ? }
? ? }
? }
</script>

以上實現，是針對我自己項目業(yè)務場景的實現，如果查詢表單不是動態(tài)獲取的，是頁面寫死的，可以在activated鉤子中調用查詢列表數據方法。這樣每次進入的緩存頁面的時候，只會更新列表數據，不會改變其他緩存。

問題：同樣會存在，列表緩存數據后，返回首頁，再次進入列表頁面，緩存數據還在，這樣可以在路由守衛(wèi)beforeRouterLeave鉤子中處理。

? activated() {
? ?this.getTableDatas()
? },
? beforeRouterLeave(to, from, next) {
? if (from.name === 'Index') {
? ? // 如果從首頁進入時調用重置方法
? ? this.reset()
? }
}

兩點注意：

要緩存的路由組件必須設置name屬性，跟cashViews中的值對應；
如果要緩存的組件比較多時，可以使用vuex管理cashViews。

（二)、根據v-if控制顯示的router-view

在路由表routes中配置meta屬性，新增keepAlive屬性，需要緩存的頁面設置keepAlive為true.

{? path: '/list',
? name: 'List',
? component: List,
? meta: {
? ? 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>

在組件的守衛(wèi)鉤子中修改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()
? }
}

vue頁面緩存問題

1.路由設置

routes：[
? {
? ? ?path: 'index',
? ? ?component: notice,
? ? ?meta: {
? ? ? ?keepAlive: true ?// 是否緩存標志
? ? ?}
? ?}
]

主要設置元信息（keepAlive）代表頁面需要緩存

2.頁面路由嵌套設置

<keep-alive>
? // 將需要緩存得頁面寫在keep-alive里面
? <view-router v-if="$route.meta.keepAlive"></view-router>
</keep-alive>
// 不需要緩存得頁面寫在外面
<view-router v-if="!$route.meta.keepAlive"></view-router>

頁面路由跳轉時將需要緩存的頁面血再keep-alive標簽之中，不需要緩存得頁面直接顯示

注：緩存頁面會使頁面增加兩個生命周期 activated，deactivated

3.從指定頁面返回使用緩存數據

其他頁面進入則從新加載數據

在需要緩存的頁面加入如下代碼

// 在進入頁面時先判斷是否是從詳情頁面返回
beforeRouterEnter (to, from, next) {
? if(to.path === '/detail') {
? ? this.$route.meta.isBack = true
? }
? next()
},
activated () {
? // 如果不是從詳情頁面返回，則重新加載數據
? if (!this.$route.meta.isBack) {
? ? //加載頁面數據
? }
? // 從新設置頁面得路由元信息
? this.$route.meta.isBack = false
}

進入頁面先判斷是否從詳情返回，從詳情返回在頁面路由元信息中加入標志，在頁面加載過程中判斷是否從詳情返回，是則不加載數據，否則從新加載頁面數據，最后需要再次設置頁面路由元信息，防止下回默認isBack: true,其他頁面進來不加載數據

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: