一、使用情景

在使用Vue開發(fā)單頁面應用時，我們通常會使用Vue-Router進行頁面導航，Vue-Router在進行路由切換的時候，頁面是會重新加載，對應的生命周期函數(shù)也會再次執(zhí)行一遍，但是在有些業(yè)務場景下，
比如：

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

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

二、keep-alive基本認識

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

三、keep-alive實現(xiàn)路由頁面緩存

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

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

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

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

• 兩點注意：

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

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

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

{
  path: '/list',
  name: 'List',
  component: List,
  meta: {
    keepAlive: true
  }
}

2. 根據(jù)當前訪問路由的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>

3. 在組件的守衛(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()
  }
}