beforeRouteLeave

需求描述

在使用 element-UItable 的时候,有这么一个需求。从一个页面切换到另一个页面,再切回来的时候,滚动条的位置不变。

需求:滚动浏览列表页,出现滚动条,点击用户名之后,跳转到商铺管理(发生路由跳转)。从商铺列表返回到信息列表之后,列表页还是之前所浏览的位置,而不是到列表页的顶部。

解决方案:

  1. 使用 beforeRouteLeave 来记录路由跳转之前滚动条的位置
  2. 使用keepAlive来缓存信息列表状态,路由切换到信息列表的时候回触发 activated
  3. activated 中将beforeRouteLeave 中记录的位置赋值给引起滚动条滚动元素的 scrollTop
    此时需要使用到 beforeRouteLeave 这个生命周期函数。

beforeRouteLeave的用法

** beforeRouteLeave(to, from, next)** : 离开路由之前执行的函数,可用于页面的反向传值,页面跳转。

  • to :跳转到哪个页面
  • from:从哪个页面跳转
  • next:相当于一个按钮开启一样。

在这里插入图片描述

具体解决方案

具体解决方案:(el-table 中引起滚动条滚动的元素是 el-table__body-wrapper):

// 路由跳转之前保存当前滚动条的位置。
beforeRouteLeave(to, from, next) {
    this.scroll = document.getElementsByClassName(
        "el-table__body-wrapper"
    )[0].scrollTop;
    next();
},
//使用keepAlive缓存组件状态,页面切换路由会触发 activated 钩子函数。在 activated 中将 之前记录的位置赋值给引起滚动条滚动元素的 scrollTop
activated(){
    this.$nextTick(() => {
        setTimeout(() => {
// 也可以使用 document.getElementsByClassName("el-table__body-wrapper")[0].scrollTop = this.scroll
          this.$refs.table.bodyWrapper.scrollTop = this.scroll;
        }, 0);
      }); 
}
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐