列表页进入详情页再返回列表页时，显示默认第一页的bug修复

如图所示，当我点击分页第二页的第一项，进入详情页后，在点击返回按钮，按理说应该返回到列表页第二页，但是却变成了默认的首页

究其原因，大概是在返回列表页时，接口传参的当前页码pageNum默认传的是1，如下图

，因此解决思路大概是，当点击分页进入第N页的时候，记录当前页码（进缓存），当从该详情页返回的时候，再从缓存中将pageNum提取出来，传入到接口里。

但是问题又来了，当从该列表页（用户列表）进入其他列表页的时候，这时的pageNum还是N，则会导致其他页面也是显示的第N页，因此在进入某一页的时候，需要将当前的pageNum和pageSize清空（缓存里的也需要清空）

附上代码如下（单独写的一个混入式工具文件，如果当前页面需要用到则引入该文件即可）

pagination.js

export default {
   beforeRouteEnter(to, from, next) { 
      //在路由加载进入之间，如果不是从当前详情页返回进入列表页的话，则将缓存中的pageNum和pageSize清除
     const toFullPath = to.fullPath
       .split('/')
       .filter((v, i) => i < 3)
       .join('');
     const fromFullPath = from.fullPath
       .split('/')
       .filter((v, i) => i < 3)
       .join('');
     if (toFullPath !== fromFullPath) {
       sessionStorage.pageNum = '';
       sessionStorage.pageSize = '';
     }
     next();
   },
   watch: {
     listQuery: {
       handler(value) {
         sessionStorage.pageNum = value.pageNum;
         sessionStorage.pageSize = value.pageSize;
       },
       deep: true,
     },
   },
   created() {
     this.listQuery.pageNum = +sessionStorage.pageNum || 1;
     this.listQuery.pageSize = +sessionStorage.pageSize || 10;
   },
 };
           

另外在当前需要用到该功能的列表页引入该工具代码：

userList.vue

import pagination from '@/utils/pagination';
export default {
  mixins:[pagination],
  data() {
  return{
  .........
  	}
  }
}