思路:将当前页的页码nowPage存入localStroage/session,然后点击编辑/详情跳转到编辑/详情页面,然后,再次返回当前页的时候,在created生命周期里,获取到存储的nowPage,再进行加载

这里要借助vue中独有的守卫钩子函数  beforeRouteEnter(在路由跳转前加载数据)还有 beforeRouteEnter  beforeRouteUpdate、beforeRouteLeave

beforeRouteEnter(to, from, next) {
    console.log(this, 'beforeRouteEnter'); // undefined
    console.log(to, '组件独享守卫beforeRouteEnter第一个参数');
    console.log(from, '组件独享守卫beforeRouteEnter第二个参数');
    console.log(next, '组件独享守卫beforeRouteEnter第三个参数');
    next(vm => {
      //因为当钩子执行前,组件实例还没被创建
      // vm 就是当前组件的实例相当于上面的 this,所以在 next 方法里你就可以把 vm 当 this 来用了。
      console.log(vm);//当前组件的实例
    });
  },

直接上代码:

下图中的 v-if=“totalPage!=0” 在本文最后解释

分页组件,在  handleCurrentChange方法中做如下操作

之后在cerated中做如下操作:

 守卫钩子:

写到这测试一下 发下页面内容正确,页码依旧是第一页

问题造成的原因:在我门返回当前页面取得总条数totalNum之前,element-ui组件已经在页面加载完毕了,这时的totalNum绑定的是data里初始化的总条数也就是0,所以呢总条数为0的时候,分页组件默认页码为1,并且当totalNum在Created生命周期里取得数据后,组件不会刷新才会导致页面内容正确,页码依旧是第一页。

解决办法:

我们要在created之后刷新这个分页组件或者让分页组件的html在cerated之后加载到页面,再次刷新这个分页组件不太现实,我们选择在created之后加载分页组件,具体方法使用v-if。在totalNum不为data里初始值为0的时候,才让这段html加载

如有更好的方法请留言,大家一起学习~QAQ

 

Logo

前往低代码交流专区

更多推荐