滚动条路由跳转位置记忆，自动定位到原位置

JS实现

给滚动区域加个ref

<div ref="scrollListWrap">
	...
</div>

初始化滚动条记录值

// 全局定义，避免路由跳转重新赋值
let scrollTop = 0;

生命周期函数

beforeDestroy() {
  scrollTop = 0;
},
beforeRouteLeave(to, from, next) {
  scrollTop = this.$refs.scrollListWrap.scrollTop;
  next();
},
activated() {
  // 页面激活钩子函数
  // 此生命周期函数需要使用keep-alive，开启缓存后才有效
  this.$nextTick(() => {
  	// dom更新完后执行
    this.$refs.scrollListWrap.scrollTop = scrollTop;
  });
}

vue 指令实现

安装声明

1. 安装vue-keep-scroll-position：
     
    npm i -S vue-keep-scroll-position

2. main.js中引入

    import VueKeepScrollPosition from 'vue-keep-scroll-position'

    Vue.use(VueKeepScrollPosition)

使用

<div v-keep-scroll-position>
	...
</div>