vue keep-alive 不生效 以及前進 后退 對數據刷新和保留緩存操作

https://blog.csdn.net/sinat_37255207/article/details/89373825

 

因為項目Vue router 連續嵌套了好幾層 首先檢查keep-alive的 include 和including 屬性是否應用正確

include 是緩存包含  including是緩存相反

項目中嵌套了好幾層keep-alive 那個頁面需要緩存 應當給當前頁面 父級最近的router 外面加keep-alive  而不是APP.vue 的最外層

因為所做的項目中有很多 分頁頁面 分頁內容中還有 查看詳情頁面 那么點擊查看詳情后  跳入詳情 在返回 當前 分頁頁面的緩存就應當 保留

我的方案如下

//分頁父級的router   $store.state.keepAlive 是vuex全局變量用於儲存
<template>
        <keep-alive :include="$store.state.keepAlive">
 
 
          <router-view/>  
        </keep-alive>
</template>

 

//點擊查看詳情
 click(str){
 
       //儲存需要緩存的頁面name 
       store.state.keepAlive=[this.$options.name]; 
       
       setTimeout(()=>{
            this.$router.push('')
       },0)
      
         
         
    },

最后 根據自己的需要 在指定場景清除  store.state.keepAlive