vue实现详情返回列表记录原始滚动位置

实现思路：

1、 页面使用内置组件 keep-alive 实现缓存
2、获取列表的滚动距离 
3、返回列表页面恢复高度

 

在路由文件中添加meta信息，将keepalive设置为true

{
      path: '/pubCustomerPage',
      name: 'pubCustomerPage',
      meta: {
        keepalive: true
      },
      component: () => import('../module/customerTotal/pubCustomerPage.vue'),
    },

　　

 监听列表中滚动的距离，在activated钩子中调用并做记录

activated() {
        this.listenerFunction();
        this.$refs.scrollbox.scrollTop = this.scrollTop;
},
methods: {
        listenerFunction(e) {
            document.addEventListener("scroll", this.getScroll, true);
        },
        getScroll() {
            this.scrollTop = this.$refs.scrollbox.scrollTop;
        },     
}

　　

在deactivated钩子在移除监听

deactivated() {
     document.removeEventListener("scroll", this.listenerFunction);
}

　　

如果从新的页面进来时候需要把滚动的值初始化

if (this.fromPath == 'customerTotal' || this.fromPath == "") {
     this.$refs.scrollbox.scrollTop = 0;
}