Vue3翻页后刷新并保持该页面数据

问题描述

在vue3中页面翻页然后刷新会自动回到第一页,例如:

此时是在第2页

刷新之后,它有跳转回到了第一页

问题解决

那么我们应该如何解决该问题呢?

1.由于该页面的数据是按照条件进行查询的,组件之间存在数据的通信,因此我们使用了pinia将数据定义在了一起

2.跳转到第二页的数据,那么pinia中的page应该为2,刷新页面后,page会变回到原始定义的数据1,所以刷新页面后,第2页的数据无法保持,回到第1页

3.我们选择将page带入到route中,每次刷新页面,将获取route中的page,保持刷新后也是第2页的数据

4..找到点击跳转页面的方法,点击后会获取val(页码,点击第2页),将页码带入到route,此时pinia中的page为2,并且通过getSingerData方法更新页面为第2页的数据

5.页面打开时就应该获取数据,获取到route的page后传递到pinia中的page,那么每次刷新就会根据page获取相应页码的数据,本来想在pinia中直接使用route,但route一般只定义在setup函数中

6.导航栏的跳转也应该改为第1页,

7.当前选中页也须修改(刷新后会保持该页选中)

注意事项

由于左侧导航栏刷新该页后应该时默认选中的状态,上面6(刷新后不会默认选中)中的index进行了重新修改,如下:

总结

1.tabs跳转:route,query.page为1,一进入页面就获取page为1的数据列表

2.点击第二页,route,query.page为2,更新pinia的page,立即获取第2页数据并刷新页面

3.重新刷新页面就是获取route,query.page中的2进行页面的刷新,而不是pinia的page了,因为此时pinia中的page刷新后是1

4.当前选中页也应该是route,query.page,否则刷新后变回1

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值