需求：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

具體代碼我就不上了，就提一下我遇到的問題：keep-alive 給它傳入includePageNames（數(shù)組），居然報錯，原因是它實際上需要一個正則表達式、或者一個逗號分隔的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) {  //參數(shù)（馬上去的頁面，現(xiàn)在的頁面，跳轉）
  if(判斷條件){
     to.meta.keepAlive = false //將要去的那個頁面的緩存清空
  }else{
    to.meta.keepAlive = true  //將要去的那個頁面的緩存保留
  }
  next();
 },

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