vue里面簡單的數據緩存

先給一種原始的方法sessionStorage或者localStorage

先說一下實現原理：

比如分頁，你從第2頁進入詳情頁

返回為了方便用戶體驗，肯定最好能回到當前這一頁

我用的分頁是elementui的分頁，可以在分頁切換的時候把頁碼緩存下來

handleCurrentChange(val){
      this.listQuery.pageNo=val;
      sessionStorage.setItem('currentPage',this.listQuery.pageNo);//重點在這里
      this.getSchoolWebModuleMessageListFunc();
    },

你進入詳情頁的時候或者編輯頁的時候你可以給一個標識，可以相同例如

sessionStorage.setItem("detail",true); 

然后你進入列表（就是有分頁的那個頁面）

if(sessionStorage.getItem('detail')){
 //上面這個就是去到詳情頁或者編輯頁的標識// 
   //如果有這個就讀取緩存里面的數據
　this.listQuery.pageNo=Number(sessionStorage.getItem("currentPage"));

}else{ 

　　this.listQuery.pageNo=1; 
　　//這個主要是從其他頁面第一次進入列表頁，清掉緩存里面的數據 
　　sessionStorage.removeItem("currentPage"); 
}

其實還有一個bug就是你已經跑過詳情頁，瀏覽器緩存里面已經有detail，你從其他頁面再次想第一次那樣進入，你本身應該不需要緩存里面的數據

你可以在離開列表頁面的時候去掉detail,如下：

destroyed(){
    sessionStorage.removeItem("detail");
  },

方法二keep-alive

<keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>
/*這個是在template里面設置，如果路由meta掛載keppAlive說明頁面需要緩存，不掛載就是不需要*/

{
          path:'',
          name:'',
          component:() => import(''),
          meta:{
            keepAlive:true
          },//路由meta(meta也可以掛載靜態權限例如meta: {
            permissionPath: '權限路由'
          })

//使用起來其實也很簡單，你只要了解keepalive里它有兩個生命周期：
activated: keep-alive組件激活時調用
deactivated: keep-alive組件停用時調用
在借助守衛鈎子beforeRouteLeave就行了

mounted(){
    if(!this.$route.meta.keepAlive){
        //這是頁面不要緩存的情況進入，接下來就是你自己的邏輯
    }
}，
activated(){
    if(this.$route.meta.keepAlive){
       //這是頁面緩存的情況進入，接下來就是你自己的邏輯
    }
} ，
beforeRouteLeave(to, from, next) {
    if(to.//你到哪些頁面要緩存，哪些不需要緩存自己寫){
      from.meta.keepAlive=true;
      next();
    }else{
      from.meta.keepAlive=false;
      this.$destroy();
      next();
    }
}

 

補充一個elementui表格新版本存在的一個bug

就是分頁的臨界點刪除的時候，比如第4頁就一條信息，刪除的時候他並不會自動請求第3頁，而是繼續傳第4頁過去導致查詢回來的數據為空

你可以在表格數據的這個函數里面加下面這一段

this.messageTable=data.data.dataList;
/**/
 if(this.messageTable.length==0&&this.listQuery.pageNo!==1){
     this.listQuery.pageNo--; //如果長度為空，且不是第一頁，那就讓他頁碼自動減1，回調本函數
      this.getSchoolWebModuleMessageListFunc();
 }
/**/主要是注釋里面的代碼，
 this.total=data.data.pagination.total;
 this.listLoading=false;