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

旧城等待， 2021-09-16 16:44 646阅读 0赞

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

![70][]

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

解决方案：（楼主的项目是vue+element）

1.   携带参数
    
    当页面跳转的时候，将页码等需要保存的数据，放在路由的参数中，传递到跳转页面，当完成后，最后回调回来，将参数带回来，初始化列表数据。正常的在切换页面是没有问题的
    
    1.  但是有问题，刷新的时候，还是第4页的数据呀，所以可以通过以下方法进行判断，在vue的页面中判断一下路由
        
         
        
        ![70 2][]
        
         通过判断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][https_blog.csdn.net_qq_39985511_article_details_79877533]
    4.  在组件的形式中，请注意内存的数据。有些数据会常驻内存。
3.  将信息存在本地
    
    将第一中方法中的数据存在浏览器的storage中就可以了，或者cookie也可以（最好不要），但是不能存在vuex，因为刷新会被清掉

###      原创不易，自由转载，注明出处！！！ ###

[70]: /images/20210813/eb7ab901e6044767863700bc030a2a1f.png
[70 1]: /images/20210813/28f59e9bf930403abed4fe3f488c4cae.png
[70 2]: /images/20210813/572842c1bde34784894a6d250afe0a63.png
[https_blog.csdn.net_qq_39985511_article_details_79877533]: https://blog.csdn.net/qq_39985511/article/details/79877533