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

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

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

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

携带参数

当页面跳转的时候，将页码等需要保存的数据，放在路由的参数中，传递到跳转页面，当完成后，最后回调回来，将参数带回来，初始化列表数据。正常的在切换页面是没有问题的
1. 但是有问题，刷新的时候，还是第4页的数据呀，所以可以通过以下方法进行判断，在vue的页面中判断一下路由
  
  通过判断from的path。如果是编辑页返回的，那么就将回带回来的参数赋值，重新进行初始化列表数据；如果path=“/”,那么就是刷新浏览器进行的，那么就所有条件清空，初始化列表数据。
2. 传递参数要放在vue路由的query中，不要放在params中。因为params在浏览器刷新会被清掉，在url中的query中就不会出现清掉的情况
做成组件

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

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

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

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

vue跳转页面之后返回_vue页面跳转后返回原页面初始位置方法
vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的 ...
HTML页面跳转后返回原页面,H5跳转链接之后，返回原界面
H5的发布链接本身是一个网页,当用户从H5的第3页跳转到另一个链接,相当于从一个网页跳到另一个网页,这时如果用户点返回,浏览器会直接让用户访问H5的第一页,而不是访问之前的第3页. 如果要让用户返回时 ...
Vue.js页面跳转后返回上一页面记录上一页面select选定的值
在当前页面中,选中了某个标签中的问题,然后跳转到问题页面,按返回按钮返回到当前页面,继续选中之前的选中标签实现效果如下图: 实现逻辑如下: 进入当前页面的时候,页面路由为http://localho ...
vue页面跳转后返回原页面初始位置
vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的 ...
phpstorm 点击方法跳转后返回原来的位置
使用 Ctrl+Alt+←(左方向键) 2.使用导航栏,Navigate -> Back,位置如下:
python对列表进行分页_python列表分页
上章的结束,若在实际开发过程中,会发现一个问题,那就首页或关注分享,是一下子按时间顺序全部显示出来,这在实际项目中不可能出现的,想想实际中的产品是如何做的? 一般来说,无非是两种,一种是使用页码,来进 ...
easyUI分页中，如何实现页面跳转，再返回时，仍然到跳转前页数。（含页面显示条数）
easyUI中,分页情况下,跳转到其他页面修改数据,再返回时,相当于重新打开此页面,即显示第一页. 这样很不方便.故提出跳转回修改前的页面的需求. 通过网上搜索,了解到实现页面跳转回去的基本原理是:传 ...
分页输入框跳转 java_displaytag 分页-添加页码输入框跳转至指定页
环境前提:工程引用displaytag-1.2.jar 使用displaytag自动生成的分页修改分页步骤 1.修改配置文件displaytag.properties 原配置文件:displayta ...
android studio 跳转后保留原页面数据_这些技巧和习惯，让你的原生 Android 手机更好用（上篇）...
从此前的 EMUI 9 到尚未正式推出的 ColorOS 6,硬件上难以突破技术限制的国产 Android 手机厂商,近来都开始在软件体验,即定制安卓 ROM 上大做文章.国内长久以来糟糕的安卓生态体 ...
Day-8 bootstrap 徽章、进度条、分页、列表组
徽章.进度条.分页.列表组徽章 1. 徽章(.Badges) 2. 各种颜色类型的徽章 3. 药丸形状徽章(.badge-pill) 4. 徽章插入到元素内进度条 1. 进度条(.progress ...

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

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

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

最新文章

热门文章