列表页进入详情页再返回列表页时，显示默认第一页的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{.........}}
}

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

java一览删除一条数据_可以删除单条数据，不能再返回列表页面，我使用的是Spring MVC...
这是控制台的日志,没问题: DEBUG [org.apache.ibatis.transaction.jdbc.JdbcTransaction] - Opening JDBC Connection D ...
list列表跳转保存位置，返回列表刷新keeplive
vue页面路由跳转离开时保存滚动条位置,进入该页面是获取位置 beforeRouteLeave (to, from, next) {const position = document.document ...
如何在页面跳转后，再返回上级页面时，保留检索条件，刷新内容
场景: 主页面:main.jsp 子页面:son.jsp 子页面检索条件:zhonglei,mingcheng,countryCodeS,asins,fnskus,skus 部分子页面代码 //这是子 ...
在app中从下向上滑动，以找到不在默认第一页的元素
1.在app中,如果第一面没有出现你要的元素,需要下滑拉动到你需要的元素的位置转载于:https://www.cnblogs.com/1234abcdttttjy001/p/10683922.htm ...
vue项目keepAlive保持页面状态（详情页返回列表页不刷新）
vue项目keepAlive保持页面状态(详情页返回列表页不刷新) 在vue项目中,存在从列表页跳转到详情页查看,而后又返回列表页的操作时,如果列表过长,我们往往希望从详情页返回列表页时,列表页能留在 ...
Django中使用UpdateView修改数据后，返回列表页
在数据维护类应用中,一般的做法是首先会显示一个列表页,用户可以选择列表页中的某一个数据进行操作.比如修改的处理,用户选中一个数据项后,应用会引导用户到数据修改页面,修改完毕后再返回列表页. Djang ...
html返回到分页不会重置,ngx-pagination - 重置分页到第一页
我正在使用ngx-pagination与服务器端分页.因此,用户输入一些搜索条件并点击搜索按钮.这会导致对服务器调用结果的第一页.在客户端,我有这个代码来显示分页控件ngx-pagination - ...
数据结构：线性数据结构（4）-列表（栈，队列，deques, 列表）
一.列表 1.1列表的抽象数据类型列表是项的集合,其中每个项保持相对于其他项的相对位置.无序列表的结构是项的集合,其中每个项保持相对于其他项的相对位置.下面给出了一些可能的无序列表操作. List( ...
hwpfdocument 获取第一页内容_有人专注搞这3个引流渠道，精准流量获取从此变得简单...
引流就是把信息送达到潜在客户面前,引起他们的注意,吸引他们. 潜在客户一天24小时,有好几个小时在访问网络信息,我们不需要送货上门去触达潜在客户,而是借助各大科技公司的平台利用他们的资源获取流量. 让 ...

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

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

最新文章

热门文章