前言

最近在寫(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)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論