問題場景

　　列表頁面輸入查詢條件，選擇第3頁，點選詳情進入詳情頁，從詳情頁返回時，預設列表頁面頁碼重置為1；此時想要快取該頁碼，有兩種方式；可按業務場景使用

方式一：用vue自帶的 keep-alive元件

官方連結：keep-alive

<keep-alive :include="list">
  <route-view></route-view>
</keep-alive>

data(){
  return {
    list:[
      'componesName',//需要快取頁面元件的name
    ]        
  }  
}
 

方式二：修改分頁元件的 internalCurrentPage

從列表頁進入詳情頁時儲存當前選中的頁碼

detail (){
  sessionStorage.setItem('currentPage') = this.currentPage  
}

返回至列表頁時如下，需要注意的是分頁元件本來是 :current-page.sync 我這裡去掉了 .sync，不去掉修改internalCurrentPage不生效。

<el-pagination
      ref="pagination"
      @size-change="handleSizeChange"
      @current
 
-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="sizes, prev, pager, next"
      :total="1000">
    </el-pagination>

//關鍵程式碼
mounted(){
  this.currentPage = sessionStorage.getItem('currenPage') || 1；
},
methods:{
  async getList(){
        
 
//.....獲取列表資料之後
        this.nextTick(() =>{
            this.$refs.pagination.internalCurrentPage = this.currentPage
　　　 }) 
　　} 
}