vue+element解决 table点击操作按钮（如编辑/详情）在编辑/详情页面关闭/保存后返回table当前页_element

本文探讨了在Vue应用中如何利用路由守卫解决分页组件刷新问题，尤其是在返回页面时保持正确的页码状态。通过使用beforeRouteEnter等钩子函数，确保在页面重新加载时能正确获取并显示最新的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：将当前页的页码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