前言

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

正文

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

當(dāng)遇到這種問題的時候，我們會首先想到，我們能不能讓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時，當(dāng)前路由就會被<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)了另一個問題，當(dāng)我從選擇地址頁面選擇地址，將地址的id存儲到localstorage中，返回order頁面并在created生命周期中取到id再進行接口請求，想要拿到這個id相關(guān)的地址信息的時候，發(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>所包裹的路由具有緩存能力，所以在路由跳轉(zhuǎn)的時候并沒有銷毀，所以返回來的時候不會執(zhí)行相關(guān)生命周期函數(shù)。那么，如果我需要在返回的時候執(zhí)行例如接口請求之類的操作該怎么辦呢？解決辦法

方法一

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

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

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

方法二

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

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

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

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

總結(jié)

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

到此這篇關(guān)于Vue中keep-alive組件的深入理解的文章就介紹到這了,更多相關(guān)Vue中keep-alive組件內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！