需求：

項(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è)參考，也希望大家多多支持好吧啦網(wǎng)。