beforeRouteLeave

需求描述

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

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

解决方案：

使用 beforeRouteLeave 来记录路由跳转之前滚动条的位置

使用keepAlive来缓存信息列表状态，路由切换到信息列表的时候回触发 activated。

在 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);

      });

}