Vue无限滚动页面跳转返回后无法恢复原滚动位置的解决方案咨询

你使用Vue3结合TanStack Vue Query实现无限滚动列表，卡片通过router-link跳转至详情页，返回原列表页时无法恢复之前的滚动位置，不想用localStorage存储滚动状态，以下是几种可行的解决方案：

方案1：利用Vue Router的滚动行为与路由State存储 #

Vue Router内置的scrollBehavior可以结合路由的state属性，在内存中临时存储滚动位置，无需依赖localStorage。

步骤1：配置Router的scrollBehavior #

在路由配置文件中修改scrollBehavior：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', name: 'PostsList', component: () => import('../views/PostsList.vue') },
    { path: '/posts/:id', name: 'posts', component: () => import('../views/PostDetail.vue') },
    // 其他路由配置
  ],
  scrollBehavior(to, from, savedPosition) {
    // 仅在从详情页返回列表页时恢复滚动位置
    if (to.name === 'PostsList' && from.name === 'posts') {
      return to.state?.scrollPosition || savedPosition || { top: 0 }
    }
    // 其他场景默认返回顶部
    return savedPosition || { top: 0 }
  }
})

export default router

步骤2：在列表组件中监听并保存滚动位置 #

修改你的列表组件代码，添加滚动监听与路由State存储逻辑：

<script setup>
import { onMounted, onUnmounted, onBeforeRouteLeave, nextTick, ref } from 'vue'
import { useRoute } from 'vue-router'
// 你的其他导入（useInfiniteQuery等）

const route = useRoute()
const scrollPosition = ref(0)

// 监听滚动事件，记录当前位置
const handleScroll = () => {
  scrollPosition.value = window.scrollY
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  // 页面挂载后，等待列表渲染完成再恢复滚动位置
  nextTick(() => {
    if (route.state?.scrollPosition) {
      window.scrollTo({ top: route.state.scrollPosition, behavior: 'auto' })
    }
  })
})

// 离开页面时，将滚动位置存入路由State
onBeforeRouteLeave((to, from, next) => {
  from.state = { ...from.state, scrollPosition: scrollPosition.value }
  next()
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

// 你的原有代码（fetchPosts、useInfiniteQuery等）
</script>

方案2：结合TanStack Query缓存特性，确保数据就绪后恢复滚动 #

你的useInfiniteQuery配置中refetchOnMount: true会导致返回页面时重新请求数据，列表高度变化导致滚动位置恢复失败。调整缓存策略，确保数据直接从缓存读取，再恢复滚动：

修改useInfiniteQuery配置 #

const {
  data,
  fetchNextPage,
  isLoading,
  hasNextPage,
  isFetching,
  error,
  isError,
  isSuccess,
} = useInfiniteQuery({
  refetchOnWindowFocus: false,
  refetchOnMount: false, // 关闭挂载时重新请求，使用缓存数据
  refetchOnReconnect: false,
  staleTime: 300000, // 设置5分钟的缓存有效期，可根据需求调整
  queryKey: queryKey,
  queryFn: fetchPosts,
  getNextPageParam: (lastPage, pages) => {
    const { count } = lastPage
    const totalFetched = pages.reduce((acc, page) => acc + page.data.length, 0)
    return totalFetched < count ? pages.length + 1 : undefined
  },
})

在组件中等待数据就绪后恢复滚动 #

在onMounted中添加逻辑，确保数据加载完成后恢复滚动：

import { watch } from 'vue'

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  // 监听data变化，确保缓存数据已加载
  watch(data, () => {
    if (data.value && route.state?.scrollPosition) {
      nextTick(() => {
        window.scrollTo({ top: route.state.scrollPosition, behavior: 'auto' })
      })
    }
  }, { immediate: true })
})

方案3：使用keep-alive缓存组件实例 #

通过keep-alive缓存列表组件的实例，组件不会被卸载，滚动位置与数据都会被保留，是最简洁的方案：

步骤1：在App.vue中配置keep-alive #

<template>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" v-if="$route.meta.keepAlive" />
    </keep-alive>
    <component :is="Component" v-else />
  </router-view>
</template>

步骤2：给列表路由添加keepAlive元信息 #

{
  path: '/',
  name: 'PostsList',
  component: () => import('../views/PostsList.vue'),
  meta: { keepAlive: true } // 标记需要缓存的路由
}

注意事项 #

• 组件缓存后，onMounted只会执行一次，若需要在每次进入页面时更新数据，可使用onActivated钩子替代onMounted
• TanStack Query的缓存会与组件实例一起保留，无需额外处理数据加载

内容的提问来源于stack exchange，提问作者Feruz Atamyradow