使用element-UI分页器,从列表页跳转到详情页面再返回的时候,显示原先的点击页数 排坑
后台管理系统使用Vue+element-UI
需求列表页面分页显示,当跳转到详情页面的时候,需要记录当前的分页数,方便返回的时候还留在详情页
①方案1 sessionStorage localstorage
缺陷如果点的并不是详情页而是别的页面,再返回到列表页的时候,默认是不会显示第一页的,而是显示你记录的页数,跟我的需求不符合pass
但是在用sessionStorage的时候 遇到了一个奇怪的问题 在下面我会讲解我遇到的坑
②路由传参 该方案是Vue中不管做菜单的高亮回显,还是分页器都是不错的方案
步骤就是在跳转页面的方法中传递一个query参数
this.$router.push({ name: 'DataEdit', query: { pageNum: this.pageInfo.pageNum } });
编辑页面接收参数返回的时候携带该参数
var _pageNum = this.$route.query.pageNum if ( _pageNum ) { this.$router.push({ name: 'DataList', query: { pageNum: _pageNum } });
但是编辑页面传递的这个参数在列表中的何处取值是个大问题,因为我就被这个问题折腾了一个小时,
原先我是在mounted钩子函数中取这个值的,但是数据是变了,然而分页按钮并未显示到正确的位置上。上面提到过我用sessionStorage是可以的,但也不完全正确
分页面接收的pageNumber参数的类型是数字,而我传的是String类型 所以用sessionStorage的方式放到mounted函数中虽然生效,但是控制台会有错误警告,用路由传参的方式,换成了String类型是不行的,这个就很奇怪了,原理不得而知。
最后解决方法就是别放到mounted中取值,而是created钩子中
代码搬运工