vue移动端实现返回主页滚动条在上次浏览的位置

这几天因为这个问题，绞尽脑汁啊。

我的项目是【 div元素内部的滚动条滚动，而不是body 】，所以解决这个问题，首先必须清楚自己的项目滚动条到底是谁的!!!!

话不多说，代码送上。

一：  首先为需要保留滚动条的组件开启缓存

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      meta:{
        keepAlive: true    //为需要保留滚动条的组件开启缓存
      },
      component:resolve => require(['@/views/home.vue'],resolve),
    },
    {
      path: '/words/:id',
      name: 'Words',
      component: Words,
      meta:{
        keepAlive: false
      }
    }
  ],

})

二：  在app.vue文件中给开启缓存的组件和没有开启的做区分

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

三：   在需要缓存滚动条的组件页面加入下面的代码

	beforeRouteLeave (to, from, next) {
			this.scrollTop = document.querySelector('.wrap').scrollTop
                    //保存滚动条元素div的scrollTop值
			next()
		},
	beforeRouteEnter (to, from, next) {
			next(vm => {
				document.querySelector('.wrap').scrollTop = vm.scrollTop
                    // 为div元素重新设置保存的scrollTop值
			})
	},

大功告成，亲测有效，有其他问题的同学可以浏览讨论。。。

转发请附带原地址！！！