前言

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

正文

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

當(dāng)遇到這種問(wèn)題的時(shí)候，我們會(huì)首先想到，我們能不能讓B路由的數(shù)據(jù)保存下來(lái)呢？這就不得不提到Vue的一個(gè)組件了，它就是keep-alive。

keep-alive

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

<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>

這樣一來(lái)的話，如果在路由配置里的meta項(xiàng)加上keepAlive屬性且值為true時(shí)，當(dāng)前路由就會(huì)被<keep-alive>包裹，變成一個(gè)可緩存路由，路由配置：

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

在離開(kāi)order路由的時(shí)候，不會(huì)執(zhí)行銷毀操作：

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

<keep-alive>帶來(lái)的問(wèn)題

在項(xiàng)目繼續(xù)進(jìn)行的時(shí)候，出現(xiàn)了另一個(gè)問(wèn)題，當(dāng)我從選擇地址頁(yè)面選擇地址，將地址的id存儲(chǔ)到localstorage中，返回order頁(yè)面并在created生命周期中取到id再進(jìn)行接口請(qǐng)求，想要拿到這個(gè)id相關(guān)的地址信息的時(shí)候，發(fā)現(xiàn)接口請(qǐng)求并未發(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)測(cè)試，發(fā)現(xiàn)也沒(méi)有東西打印出來(lái)，然后我把created改成mounted，依舊是這樣。

原因

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

方法一

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

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

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

方法二

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

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

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

這里由于我這個(gè)頁(yè)面還需要?jiǎng)e的頁(yè)面跳轉(zhuǎn)過(guò)來(lái)進(jìn)行相關(guān)操作，要進(jìn)行路由判斷，所以使用的第一種方法。

總結(jié)

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

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