快捷導(dǎo)航

解決Vue keep-alive 調(diào)用 $destory() 頁(yè)面不再被緩存的情況

更新時(shí)間：2020年10月30日 10:33:45 作者：風(fēng)傷影

這篇文章主要介紹了解決Vue keep-alive 調(diào)用 $destory() 頁(yè)面不再被緩存的情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

需求：

項(xiàng)目中需要開(kāi)發(fā)一個(gè)導(dǎo)航欄，類(lèi)似瀏覽器的導(dǎo)航，沒(méi)有關(guān)閉的時(shí)候頁(yè)面緩存，關(guān)掉之后，頁(yè)面隨之銷(xiāo)毀。（如圖）

項(xiàng)目是使用Vue + Vue-Router + Vuex

剛開(kāi)始使用的方法是：關(guān)閉導(dǎo)航標(biāo)簽，直接調(diào)用對(duì)應(yīng)的頁(yè)面的$destory()方法，OK，可以實(shí)現(xiàn)關(guān)閉頁(yè)面（下次再打開(kāi)該頁(yè)面，將初始化）的功能，但是遇到個(gè)問(wèn)題：

該頁(yè)面將不再被緩存，也就是說(shuō)切換導(dǎo)航tab時(shí)，頁(yè)面將不斷的被初始化?。?！

查了一下文檔，找了度娘，沒(méi)發(fā)現(xiàn)解決方法，又去請(qǐng)教G哥，這才發(fā)現(xiàn)原來(lái)Vue keep-alive真的有這個(gè)問(wèn)題哎，這個(gè)是（鏈接），要么你自己去看，要么看我的解決方法，嘿嘿嘿，不瞎扯啦，上方法，其實(shí)Vue的文檔里面也寫(xiě)了的這里：

keep-alive 可以傳入兩種參數(shù)，貼一下官方說(shuō)明：

include 和 exclude 屬性允許組件有條件地緩存。二者都可以用逗號(hào)分隔字符串、正則表達(dá)式或一個(gè)數(shù)組來(lái)表示：

< keep-alive include=”a,b”>
< component :is=”view”>
< /keep-alive>
< !– 正則表達(dá)式 (使用 v-bind) –>
< keep-alive :include=”/a|b/”>
< component :is=”view”>
< / keep-alive>
< !– 數(shù)組 (使用 v-bind) –>
< keep-alive :include=”[‘a(chǎn)', ‘b']”>
< component :is=”view”>
< /keep-alive>`

匹配首先檢查組件自身的 name 選項(xiàng)，如果 name 選項(xiàng)不可用，則匹配它的局部注冊(cè)名稱(chēng) (父組件 components 選項(xiàng)的>>鍵值)。匿名組件不能被匹配。

keep-alive 不會(huì)在函數(shù)式組件中正常工作，因?yàn)樗鼈儧](méi)有緩存實(shí)例。

差不多看明白了吧，頁(yè)面的銷(xiāo)毀不一定非得調(diào)用$destory() 去做，我理一下思路（include）：

首先在vuex里面定義一個(gè)數(shù)組 includePageNames，這個(gè)數(shù)組存放的是當(dāng)前導(dǎo)航欄上顯示的頁(yè)面的名字name（在每個(gè)頁(yè)面的Vue文件中，定義name的值）

當(dāng)頁(yè)面打開(kāi)的時(shí)候，將該頁(yè)面的name加（$commit）到includePageNames中

當(dāng)頁(yè)面關(guān)閉的時(shí)候，將includePageNames中該頁(yè)面對(duì)應(yīng)的name移除掉，這時(shí)候該頁(yè)面液將從緩存中被移除，這不就達(dá)到我們想要的結(jié)果了嗎

具體代碼我就不上了，就提一下我遇到的問(wèn)題：keep-alive 給它傳入includePageNames（數(shù)組），居然報(bào)錯(cuò)，原因是它實(shí)際上需要一個(gè)正則表達(dá)式、或者一個(gè)逗號(hào)分隔的String，沒(méi)辦法啦，直接將includePageNames.toString()傳過(guò)去就OK啦

補(bǔ)充知識(shí)：vue 頁(yè)面保留緩存和清除緩存

路由：

routes: [{
    path: '/page1',
    name: page1',
    component: page1',
    meta:{
          keepAlive:true //true是保存緩存，false是不保存
         } 
},{
path: '/page2',
    name: page2',
    component: page2',
     meta:{
          keepAlive:true
         }
 
}]

頁(yè)面js：

 /**
  * 判斷是否要清除緩存，beforeRouteLeave與methods等平級(jí)
  */
  beforeRouteLeave(to, from, next) {  //參數(shù)（馬上去的頁(yè)面，現(xiàn)在的頁(yè)面，跳轉(zhuǎn)）
  if(判斷條件){
     to.meta.keepAlive = false //將要去的那個(gè)頁(yè)面的緩存清空
  }else{
    to.meta.keepAlive = true  //將要去的那個(gè)頁(yè)面的緩存保留
  }
  next();
 },

以上這篇解決Vue keep-alive 調(diào)用 $destory() 頁(yè)面不再被緩存的情況就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: