使用Inertia.js重定向回已访问页面时如何恢复原页面滚动位置？

你说得没错——Inertia的preserveScroll和preserveState确实只对同一页面的重新加载/刷新生效，跨页面导航时（比如从创建页回到列表页），这些选项就帮不上忙了。不过有几个优雅的办法可以解决这个问题，针对你的场景，我推荐以下几种方案：

方案一：页面级监听Inertia导航事件，保存并恢复滚动位置 #

这个方案最贴合你的单页面应用场景，在用户列表页（User/List.vue）里直接处理滚动位置的保存和恢复，不需要全局修改：

<script setup>
import { onMounted, onUnmounted } from 'vue'

// 保存导航事件的监听函数，方便销毁时移除
let saveScrollListener = null

onMounted(() => {
  // 1. 页面加载完成后，检查是否有保存的滚动位置，有的话恢复
  const savedScrollTop = localStorage.getItem('userListScrollTop')
  if (savedScrollTop) {
    // 加个小延迟确保列表内容渲染完成
    setTimeout(() => {
      window.scrollTo(0, parseInt(savedScrollTop))
    }, 100)
    // 恢复后清除缓存，避免下次进入列表页自动滚动
    localStorage.removeItem('userListScrollTop')
  }

  // 2. 监听Inertia导航事件，当用户离开列表页时保存滚动位置
  saveScrollListener = (event) => {
    // 只在跳转到非列表页时保存（比如跳转到创建页）
    if (event.detail.to.component !== 'User/List') {
      localStorage.setItem('userListScrollTop', window.scrollY)
    }
  }
  window.addEventListener('inertia:navigate', saveScrollListener)
})

onUnmounted(() => {
  // 组件销毁时移除监听，避免内存泄漏
  window.removeEventListener('inertia:navigate', saveScrollListener)
})
</script>

为什么这个方案可行？ #

Inertia的inertia:navigate事件会在单页应用内的任何导航开始前触发，所以我们可以精准捕获用户从列表页跳转到创建页的动作，把当前滚动位置存在localStorage里。当用户从创建页重定向回列表页时，列表页挂载后读取这个值并滚动到对应位置，之后清除缓存避免干扰下次进入。

方案二：全局监听导航事件，统一处理滚动恢复 #

如果你的项目里还有其他类似的跨页面滚动恢复需求，可以用全局事件监听来统一处理，不用每个页面都写重复代码。在你的Inertia初始化文件（比如resources/js/app.js）里添加：

import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  // 你的现有配置...
  setup({ el, App, props }) {
    // 保存滚动位置：当用户离开列表页时触发
    window.addEventListener('inertia:navigate', (event) => {
      if (props.page.component === 'User/List') {
        // 用sessionStorage，标签页关闭后自动清除，更适合临时状态
        sessionStorage.setItem('userListScrollTop', window.scrollY)
      }
    })

    // 恢复滚动位置：当列表页加载完成时触发
    window.addEventListener('inertia:page:finish', (event) => {
      if (event.detail.page.component === 'User/List') {
        const savedScroll = sessionStorage.getItem('userListScrollTop')
        if (savedScroll) {
          setTimeout(() => {
            window.scrollTo(0, parseInt(savedScroll))
          }, 100)
          sessionStorage.removeItem('userListScrollTop')
        }
      }
    })

    // 你的现有setup代码...
  },
})

这个方案的优势是一次配置，所有符合条件的页面都能复用，适合多页面需要滚动恢复的场景。

方案三：通过查询参数传递滚动位置（精准控制场景） #

如果你希望只在“从创建页返回列表页”的特定场景下恢复滚动，而不是所有进入列表页的情况，可以通过查询参数传递滚动位置：

步骤1：列表页跳转时传递滚动位置 #

修改“添加用户”按钮的导航逻辑，把当前滚动位置作为查询参数传给创建页：

<Button 
  size="small" 
  label="Add User" 
  class="mr-5" 
  icon="pi pi-plus" 
  @click="$inertia.visit(route('user.create', { scrollTop: window.scrollY }))"
/>

步骤2：后端重定向时带回参数 #

在Laravel的store方法里，接收这个参数并重定向回列表页时带上：

public function store(Request $request)
{
    // 执行用户创建逻辑...
    $scrollTop = $request->query('scrollTop');
    
    return redirect()
        ->route('user.index', ['scrollTop' => $scrollTop])
        ->with('successMessage', 'User created!');
}

步骤3：列表页读取参数并滚动 #

在User/List.vue里读取查询参数，滚动到对应位置后清除参数：

<script setup>
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

onMounted(() => {
  const scrollTop = route.query.scrollTop
  if (scrollTop) {
    window.scrollTo(0, parseInt(scrollTop))
    // 清除URL中的scrollTop参数，避免影响后续导航
    history.replaceState(null, null, route.path)
  }
})
</script>

这个方案的优势是完全精准控制，只有从创建页返回时才会恢复滚动，不会干扰其他进入列表页的场景。

额外注意事项 #

• 如果你的列表是动态渲染的（比如有分页、实时更新），要确保用户返回时的列表内容和离开时一致，否则滚动位置可能对应不上（比如新增了其他用户导致列表高度变化）。
• 延迟滚动的setTimeout可以根据你的页面渲染速度调整，一般100ms足够，主要是为了避免Inertia渲染页面时覆盖我们的滚动操作。

备注：内容来源于stack exchange，提问作者Unforgiven