vue在移动端缓存页面的滚动条位置问题

路由从列表页调到详情页后返回列表页后滚动条位置自动回到顶部这是我们不想要的。实现列表页跳到详情页后详情页返回列表页滚动条位置不发生变化

缓存路由写法

<keep-alive>
  <router-view v-if='$route.meta.keepAlive'></router-view>
</keep-alive>
<router-view v-if='!$route.meta.keepAlive'></router-view>

{
  path: '/',
    redirect: '/home',
    component: AppLayout, //写router-view的页面
    name: '首页',
    meta: {
      title: '首页'
    },
    children: [
      {
        path: '/home',
        component: () => import('@pr/views/hahah'),
        name: 'haha',
        meta: {
          keepAlive: true,
        }
      },
   ]
}

对缓存页面添加一下代码

data() {
	return {
    	scroll: 0
    }
}
mounted() {
  window.addEventListener('scroll', this.getScroll,);
},
activated() {
  if(this.scroll > 0) {
    document.querySelector('#content').scrollTop = this.scroll;
      window.addEventListener('scroll', this.getScroll, );
  }
},
destroyed() {
  window.removeEventListener('scroll', this.getScroll, );
},
deactivated() {
  window.removeEventListener('scroll', this.getScroll, );
},
methods: {
	getScroll () {
      this.scroll  = document.querySelector('#content').scrollTop;
    }
}