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
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue项目打包:修改dist文件名方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要为大家详细介绍了Vue如何结合echarts实现水滴图的绘制，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-07-07
相信很多人在用Vue使用别人的组件时,会用到 Vue.use() ,例如：Vue.use(VueRouter)、Vue.use(MintUI),这篇文章主要给大家介绍了关于Vue中Vue.use()的原理及基本使用的相关资料,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了vue打包npm run build时候界面报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
在日常的工作中，有时候会碰到需要将某个网址网页保存成为pdf的情况，这篇文章主要介绍了用Vue实现网页转PDF的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要为大家详细介绍了vue实现购物车的小练习，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
如何解决Vue请求接口出现跨域问题Access-Control-Allow-Origin
这篇文章主要介绍了如何解决Vue请求接口出现跨域问题Access-Control-Allow-Origin,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue使用自定义的icon图标的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-05-05
这篇文章主要介绍了VUE 全局变量的几种实现方式,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
Vue如何使用Promise.all()方法并行执行多个请求
在Vue中,可以使用Promise.all()方法并行执行多个异步请求,当所有请求都成功返回时,Promise.all()将返回一个包含所有请求结果的数组,如果其中任何一个请求失败,则会触发catch()方法并返回错误信息,这种方式可以显著提高程序的性能和响应速度2025-01-01
最新评论