Vue中keep-alive組件的深入理解

前言

最近在寫Vue項目的時候，遇到了一個問題，我從A路由使用parmas方式傳參跳轉到B路由，然后從B路由跳轉到C路由，再從C路由返回B路由的時候，發(fā)現(xiàn)從A路由傳到B路由的參數(shù)已經(jīng)不存在了。

正文

我們都知道，vue組件進行路由跳轉時，會銷毀當前組件。所以從其他路由返回當前路由時，當前路由會重新執(zhí)行生命周期鉤子函數(shù)。這就導致了上述問題，A路由傳到B路由的參數(shù)沒了。

當遇到這種問題的時候，我們會首先想到，我們能不能讓B路由的數(shù)據(jù)保存下來呢？這就不得不提到Vue的一個組件了，它就是keep-alive。

keep-alive

<keep-alive>包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀它們。
在路由出口加上：

 <div id="app">
 <keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>
 </div>

這樣一來的話，如果在路由配置里的meta項加上keepAlive屬性且值為true時，當前路由就會被<keep-alive>包裹，變成一個可緩存路由，路由配置：

 {
  path: '/order',
  name: 'Order',
  component: () => import('@/views/order/order'),
  meta: {
  keepAlive: true // 需要被緩存
  }
 }

在離開order路由的時候，不會執(zhí)行銷毀操作：

可以看到，在返回order路由也就是上述B路由的時候，前一個頁面?zhèn)鬟f過來的數(shù)據(jù)仍然保留了下來。

<keep-alive>帶來的問題

在項目繼續(xù)進行的時候，出現(xiàn)了另一個問題，當我從選擇地址頁面選擇地址，將地址的id存儲到localstorage中，返回order頁面并在created生命周期中取到id再進行接口請求，想要拿到這個id相關的地址信息的時候，發(fā)現(xiàn)接口請求并未發(fā)出：

 created() {
  this.userId = JSON.parse(localStorage.getItem("user")).userId
  if (JSON.parse(localStorage.getItem("addressId"))) {
  this.addressId = JSON.parse(localStorage.getItem("addressId"))
  }
  this.getAddress()
 },

于是我在里面加上console.log(1)測試，發(fā)現(xiàn)也沒有東西打印出來，然后我把created改成mounted，依舊是這樣。

原因

由于<keep-alive>所包裹的路由具有緩存能力，所以在路由跳轉的時候并沒有銷毀，所以返回來的時候不會執(zhí)行相關生命周期函數(shù)。那么，如果我需要在返回的時候執(zhí)行例如接口請求之類的操作該怎么辦呢？
解決辦法

方法一

在需要緩存的頁面中使用路由中的beforeRouteEnter方法，只要跳轉到了這個路由，這個方法就會執(zhí)行，在路由跳轉前執(zhí)行相關操作：

  beforeRouteEnter(to, from, next) {
   console.log('from', from)
   next(vm => {
    if (from.path == "/selectAddress") {
     // 選擇收貨地址后返回頁面更新收貨地址
     vm.addressId = JSON.parse(localStorage.getItem("addressId"))
     vm.getAddress()
    }
   })
  }

vm相當于this，由于路由守衛(wèi)在導航確認前被調用,因此即將登場的新組件還沒被創(chuàng)建，所以直接訪問this是訪問不到的。

方法二

使用activated生命周期鉤子函數(shù)，這個函數(shù)在被 <keep-alive> 緩存的組件激活時調用。

  activated () {
   this.addressId = JSON.parse(localStorage.getItem("addressId"))
   this.getAddress()
  },

同樣能實現(xiàn)效果。

這里由于我這個頁面還需要別的頁面跳轉過來進行相關操作，要進行路由判斷，所以使用的第一種方法。

總結

Vue的 keep-alive 組件可以實現(xiàn)組件數(shù)據(jù)緩存功能，但是使用時要注意，在組件未銷毀時去到當前組件，組件的部分生命周期鉤子函數(shù)不會執(zhí)行。這時可以使用 路由守衛(wèi) 或者是 activated 和 deactivated 生命周期鉤子函數(shù)實現(xiàn)相關操作。

到此這篇關于Vue中keep-alive組件的深入理解的文章就介紹到這了,更多相關Vue中keep-alive組件內容請搜索億速云以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持億速云！