vue刷新页面时保持当前分页不变(使用本地存储保存页码)
vue刷新页面时保持当前分页的页码,(分页)刷新后回到刷新前的页面
·
在使用vue开发在线购物系统时遇到问题
如图,在当前页面想点击’确认订单’按钮使商品状态改变为’备货完成’。测试时发现点击确认订单后,虽然按钮的状态会发生改变,但是页面会跳转到第一页,使得每次操作之后都要重新选择界面。
因此,需要实现在刷新页面时保持当前的分页页码不改变。
查看代码可知
created() {
this.handleCurrentChange(1)
}
原本的代码是在页面构造时直接传入第一页的页码使得页面去读取第一页应有的数据。
因此解决方法就是设置一个变量,用于保存每一次刷新前的页面页码数,页面构造函数里进行判断如果这个变量为空,那么说明是第一次加载页面,页面读取第一页数据。
在需要刷新前将当前页码保存,页面构造时如果这个变量不为空,那么页面读取这个变量并传入handleCurrentChange函数加载对应页码数的数据。
解决:如图,在this.reload()函数前,使用本地存储保存当前页码
在created里读取这个变量并与1比较。若为空那么传入的值为1,页面加载第一页数据,不为空则加载在刷新之前所储存的页码并读取数据。问题解决
created() {
this.currentPage = localStorage.getItem("lastpage") || 1
this.handleCurrentChange(this.currentPage )
}
更多推荐
已为社区贡献2条内容
所有评论(0)