前言

最近在寫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元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！