需求：

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

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

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

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

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

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

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

< 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)不可用，則匹配它的局部注冊名稱 (父組件 components 選項(xiàng)的>>鍵值)。匿名組件不能被匹配。

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

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

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

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

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

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

補(bǔ)充知識：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)在的頁面，跳轉(zhuǎn)）
  if(判斷條件){
     to.meta.keepAlive = false //將要去的那個(gè)頁面的緩存清空
  }else{
    to.meta.keepAlive = true  //將要去的那個(gè)頁面的緩存保留
  }
  next();
 },

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

最新評論