vue3 keep-alive跳转回来后 scroll位置丢失-YES开发框架网

在 Vue3 中，使用组件确实可以缓存组件状态，避免重复渲染，但它并不直接处理滚动位置的恢复。当页面跳转回来后，如果发现滚动位置scrollTop丢失，可以通过以下方法来解决这个问题：

涉及到在组件的 onBeforeRouteLeave 钩子中保存滚动位置，在 onActivated 钩子中恢复滚动位置。

添加导入

JavaScript 全选

import { ref, onMounted, onActivated } from 'vue';
import { onBeforeRouteLeave } from 'vue-router';

在 Vue3 中，onBeforeRouteLeave 是 Vue Router 的导航守卫，而不是 Vue 本身的生命周期钩子。因此，你需要从 vue-router 中导入它，而不是从 vue。

逻辑实现

JavaScript 全选

// 保存的滚动位置
let savedScrollTop = 0;
const scrollContainer = ref(null);

onActivated(() => {
  // 从 keep-alive 缓存中恢复时，恢复滚动位置
  console.log('onActivated savedScrollTop == ', savedScrollTop)
  if (savedScrollTop > 0) {
    scrollContainer.value.scrollTop = savedScrollTop;
  }
});

onBeforeRouteLeave(() => {
  // 保存滚动位置到路由元信息
  savedScrollTop = scrollContainer.value.scrollTop
  console.log('onBeforeRouteLeave savedScrollTop == ', savedScrollTop)
});

编写为自定义指令，方便使用

vue3 + javascript：src/directives/saveScrollTop.js

C# 全选

// import router from '@/router'
import { onBeforeRouteLeave } from 'vue-router'

export default {
  name: 'saveScrollTop',
  savedScrollTop: 0,
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
    console.log('v-saveScrollTop created')
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {
    console.log('v-saveScrollTop beforeMount')
  },
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {
    console.log('v-saveScrollTop mounted')

    // onBeforeRouteLeave(() => {
    //   // 保存滚动位置到路由元信息
    //   binding.dir.savedScrollTop = el.scrollTop
    //   console.log('onBeforeRouteLeave savedScrollTop == ', binding.dir.savedScrollTop)
    // })
    el.__scrollHandler = () => {
      binding.dir.savedScrollTop = el.scrollTop
      console.log('v-saveScrollTop savedScrollTop == ', binding.dir.savedScrollTop)
    }

    el.addEventListener('scroll', el.__scrollHandler)
  },
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {
    console.log('v-saveScrollTop beforeUpdate')
  },
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {
    console.log('v-saveScrollTop updated')
    console.log('onActivated savedScrollTop == ', binding.dir.savedScrollTop)
    if (binding.dir.savedScrollTop > 0) {
      el.scrollTop = binding.dir.savedScrollTop
    }
  },
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {
    console.log('v-saveScrollTop beforeUnmount')
    el.removeEventListener('scroll', el.__scrollHandler)
  },
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {
    console.log('v-saveScrollTop unmounted')
  }
}

main.js中注册指令

JavaScript 全选

import saveScrollTop from './directives/saveScrollTop'
const app = createApp(App)
// 注册全局指令
app.directive(saveScrollTop.name, saveScrollTop)

使用：

在需要保存滚动位置的元素中，使用指令 v-saveScrollTop

vue3 keep-alive跳转回来后 scroll位置丢失