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

旧城等待, 2021-09-16 16:44 635阅读 0赞

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

70

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

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

  1. 携带参数

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

    1. 但是有问题,刷新的时候,还是第4页的数据呀,所以可以通过以下方法进行判断,在vue的页面中判断一下路由
  1. ![70 2][]
  2. 通过判断frompath。如果是编辑页返回的,那么就将回带回来的参数赋值,重新进行初始化列表数据;如果path=“/”,那么就是刷新浏览器进行的,那么就所有条件清空,初始化列表数据。
  3. 2. 传递参数要放在vue路由的query中,不要放在params中。因为params在浏览器刷新会被清掉,在url中的query中就不会出现清掉的情况
  1. 做成组件

    通过和后端大哥交流,大哥给的方案,和大家分享一下,就是将列表和编辑页面分别做成组件,通过组件的显示和隐藏进行切换。

    1. 通过显隐切换,这样就很方便的实现缓存数据的问题
    2. 当进入编辑页面,点击浏览器的回退按钮,不会回退到列表页面。因为都是组件,就在一个页面中
    3. 我们要使用v-show,不要适用v-if和component,具体原因,请移步https://blog.csdn.net/qq_39985511/article/details/79877533
    4. 在组件的形式中,请注意内存的数据。有些数据会常驻内存。
  2. 将信息存在本地

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

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

发表评论

表情:
评论列表 (有 0 条评论,635人围观)

还没有评论,来说两句吧...

相关阅读