vue移动端解决返回主页缓存滚动条不重置顶部的问题

我的项目是有一个带有滚动条的列表数据,当滚动条滑动好几页之后点击其中一条数据进入详情页之后,在详情页有返回按钮,返回的时候希望还在当前位置,而不是重置到顶部,对用户体验及其不好,试了好多种方法,最终也是实现啦,话不多说看代码吧

一… 首先为需要保留滚动条的组件开启缓存,在 router.js 中写上如下代码:

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: shenpi
    },
    {
      path: '/submit',
      name: 'submit',
      component: submit,
      meta: {
        requireAuth: true
      },
    },
    {
      path: '/error',
      name: 'error',
      component: error
    }
  ]
})

二… 在App.vue文件中给组件开启缓存,使用keep-alive

我这是利用include实现的部分页面开启缓存,在data里定义一个数组,把想要缓存的页面放在数组里

<template>
  <div id="app">
    <keep-alive :include="include">  <router-view /></keep-alive>  
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      include:["/submit","/approval","/copy"]
    };
  },
};
</script>

二… 也可以在app.vue文件中给开启缓存的组件和没有开启的做区分,可以这样写(任选一种即可)

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

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

export default {
//这个name名字要写,与路由的名字保持一致
  name: "/submit",
  data() {
    return {};
  },

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