vue + elementui 分页切换页面，缓存页码

问题场景

　　列表页面输入查询条件，选择第3页，点击详情进入详情页，从详情页返回时，默认列表页面页码重置为1；此时想要缓存该页码，有两种方式；可按业务场景使用

方式一：用vue自带的 keep-alive组件

官方链接：keep-alive

该方式会缓存组件，组件中其他状态也会被缓存；若只想缓存分页组件，用方式二。

被缓存的组件生命周期不再有mounted，与之替代的是activated。当被缓存的列表页面有状态改变时，可以在activated生命周期中调用更新数据方法；例如从列表页面对这条数据有一些操作：审批，撤回，明细，修改等。当一条数据点击审批进入审批页面并提交审批后返回到列表页面审批操作需要更新为撤回操作，此时由于页面被缓存则需要在activated生命周期中调用更新数据方法。

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

data(){
  return {
    list:[
      'componesName',//需要缓存页面组件的name
    ]        
  }  
}
activated(){
this.init()
}

方式二：修改分页组件的 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
 }) 
} 
}