需求：

項目中需要開發一個導航欄，類似瀏覽器的導航，沒有關閉的時候頁面緩存，關掉之后，頁面隨之銷毀。（如圖）

項目是使用Vue + Vue-Router + Vuex

剛開始使用的方法是：關閉導航標簽，直接調用對應的頁面的$destory()方法，OK，可以實現關閉頁面（下次再打開該頁面，將初始化）的功能，但是遇到個問題：

該頁面將不再被緩存，也就是說切換導航tab時，頁面將不斷的被初始化?。?！

查了一下文檔，找了度娘，沒發現解決方法，又去請教G哥，這才發現原來Vue keep-alive真的有這個問題哎，這個是（鏈接），要么你自己去看，要么看我的解決方法，嘿嘿嘿，不瞎扯啦，上方法，其實Vue的文檔里面也寫了的這里：

keep-alive 可以傳入兩種參數，貼一下官方說明：

include 和 exclude 屬性允許組件有條件地緩存。二者都可以用逗號分隔字符串、正則表達式或一個數組來表示：

< keep-alive include=”a,b”>< component :is=”view”>< /keep-alive>< !? 正則表達式 (使用 v-bind) ?>< keep-alive :include=”/a|b/”>< component :is=”view”>< / keep-alive>< !? 數組 (使用 v-bind) ?>< keep-alive :include=”[‘a’, ‘b’]”>< component :is=”view”>< /keep-alive>`

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

keep-alive 不會在函數式組件中正常工作，因為它們沒有緩存實例。

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

首先在vuex里面定義一個數組 includePageNames，這個數組存放的是當前導航欄上顯示的頁面的名字name（在每個頁面的Vue文件中，定義name的值）

當頁面打開的時候，將該頁面的name加（$commit）到includePageNames中

當頁面關閉的時候，將includePageNames中該頁面對應的name移除掉，這時候該頁面液將從緩存中被移除，這不就達到我們想要的結果了嗎

具體代碼我就不上了，就提一下我遇到的問題：keep-alive 給它傳入includePageNames（數組），居然報錯，原因是它實際上需要一個正則表達式、或者一個逗號分隔的String，沒辦法啦，直接將includePageNames.toString()傳過去就OK啦

補充知識：vue 頁面保留緩存和清除緩存

路由：

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

頁面js：

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

以上這篇解決Vue keep-alive 調用 $destory() 頁面不再被緩存的情況就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。