带有分页的列表的跳转后,返回时怎么实现保留分页的页数等信息

我们通过一个列表,进入了下一个页面,返回列表页面的时候,怎么实现保留页面数据

eg:当我们从列表的第4页去编辑这条信息,那么当编辑完成后我们是不是返回到列表页,那么列表页应该显示第几页的数据呢?

解决方案:(楼主的项目是vue+element)

  1.  携带参数

    当页面跳转的时候,将页码等需要保存的数据,放在路由的参数中,传递到跳转页面,当完成后,最后回调回来,将参数带回来,初始化列表数据。正常的在切换页面是没有问题的

    1. 但是有问题,刷新的时候,还是第4页的数据呀,所以可以通过以下方法进行判断,在vue的页面中判断一下路由

       

       通过判断from的path。如果是编辑页返回的,那么就将回带回来的参数赋值,重新进行初始化列表数据;如果path=“/”,那么就是刷新浏览器进行的,那么就所有条件清空,初始化列表数据。

    2. 传递参数要放在vue路由的query中,不要放在params中。因为params在浏览器刷新会被清掉,在url中的query中就不会出现清掉的情况

  2. 做成组件

    通过和后端大哥交流,大哥给的方案,和大家分享一下,就是将列表和编辑页面分别做成组件,通过组件的显示和隐藏进行切换。
    1. 通过显隐切换,这样就很方便的实现缓存数据的问题

    2. 当进入编辑页面,点击浏览器的回退按钮,不会回退到列表页面。因为都是组件,就在一个页面中

    3. 我们要使用v-show,不要适用v-if和component,具体原因,请移步https://blog.csdn.net/qq_39985511/article/details/79877533

    4. 在组件的形式中,请注意内存的数据。有些数据会常驻内存。

  3. 将信息存在本地

    将第一中方法中的数据存在浏览器的storage中就可以了,或者cookie也可以(最好不要),但是不能存在vuex,因为刷新会被清掉

     原创不易,自由转载,注明出处!!!

  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值