vue中 beforeRouteLeave 生命周期函数

beforeRouteLeave

需求描述

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

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

解决方案：

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