使用element-UI分页器,从列表页跳转到详情页面再返回的时候,显示原先的点击页数 排坑

使用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钩子中