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

前言

最近在寫Vue項目的時候，遇到了一個問題，我從A路由使用parmas方式傳參跳轉到B路由，然后從B路由跳轉到C路由，再從C路由返回B路由的時候，發現從A路由傳到B路由的參數已經不存在了。

正文

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

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

keep-alive

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

 <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路由的時候，不會執行銷毀操作：

可以看到，在返回order路由也就是上述B路由的時候，前一個頁面傳遞過來的數據仍然保留了下來。

<keep-alive>帶來的問題

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

 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)測試，發現也沒有東西打印出來，然后我把created改成mounted，依舊是這樣。

原因

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

方法一

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

  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，由于路由守衛在導航確認前被調用,因此即將登場的新組件還沒被創建，所以直接訪問this是訪問不到的。

方法二

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

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

同樣能實現效果。

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

總結

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

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