vue使用keep-alive保持滚动条位置的实现方法

当我们在Vue应用中使用Vue-router进行路由跳转时，如果跳转到的页面存在滚动条，那么这时候就会存在一个问题，就是当我们返回到之前的路由时，滚动条会自动回到顶部，而不是保持在之前的位置。而我们可以使用keep-alive组件来保持滚动条位置。

Vue中keep-alive组件的使用

Vue中的keep-alive组件可以帮助我们在组件切换时，保留组件状态和避免重新渲染，在Vue中非常常用。在使用keep-alive组件时，我们需要将需要保留状态的组件放在keep-alive组件内，如下所示：

<keep-alive>
  <router-view></router-view>
</keep-alive>

这里我们将<router-view>组件放在了<keep-alive>组件中，这样在路由切换后，下次进入该路由时，之前渲染过的组件就会被缓存起来，并且保持之前的状态。

Vue使用keep-alive保持滚动条位置的实现方法

Vue在使用keep-alive组件时，可以通过include和exclude属性来指定需要缓存组件和需要排除缓存的组件，同时在Vue-router的<router-view>中使用<keep-alive>也可以避免每次都重新渲染组件。在这里，我们可以利用这些特性来保持滚动条位置。

第一种实现方法

我们可以在需要保持滚动条位置的组件中，添加keep-alive属性，并在scrollBehavior生命周期中保存并恢复滚动条位置，如下所示：

<template>
  <div class="my-component" keep-alive>
    ...
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  mounted () {
    const currentPosition = sessionStorage.getItem('currentPosition')
    if (currentPosition) {
      this.$nextTick(() => {
        this.$el.scrollTop = currentPosition
      })
    }
  },
  activated () {
    const currentPosition = sessionStorage.getItem('currentPosition')
    if (currentPosition) {
      this.$nextTick(() => {
        this.$el.scrollTop = currentPosition
      })
    }
  },
  beforeRouteLeave (to, from, next) {
    sessionStorage.setItem('currentPosition', this.$el.scrollTop)
    next()
  }
}
</script>

在组件中，我们添加了keep-alive属性，使得组件不会每次都重新渲染，同时在mounted和activated生命周期中读取保存的滚动条位置，如果有保存位置，则将滚动条位置设置为保存的位置；在beforeRouteLeave生命周期中，将当前滚动条位置保存到sessionStorage中。

第二种实现方法

我们也可以在Vue的Router实例中，通过设置路由的scrollBehavior属性，来实现保持滚动条位置，如下所示：

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ],
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

在scrollBehavior中，我们可以对可用的位置保存进行判断，如果有保存位置，则使用保存位置；否则，返回(0, 0)的位置。