列表页进入详情页再返回列表页时,显示默认第一页的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{
  .........
  	}
  }
}
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页