先給一種原始的方法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");
  },

補充一個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;

vue裏面簡單的數據緩存