在InertiaJS中使用提交按钮时如何实现preserve-scroll保留滚动位置

preserve-scroll 是 <Link> 组件的专属属性，无法直接作用于普通 <button> 标签，表单提交场景需要在请求配置中指定滚动保留参数即可解决。

方案1：使用 useForm 组合式API（推荐） #

在调用表单提交方法时，第二个参数配置项中添加 preserveScroll: true
代码示例：

<script setup>
import { useForm } from '@inertiajs/inertia-vue3'

const form = useForm({
  // 表单字段定义
  title: '',
  description: ''
})

const submit = () => {
  form.post(route('your.submit.endpoint'), {
    preserveScroll: true, // 开启滚动位置保留
    onSuccess: () => {
      // 自定义提交成功逻辑
    }
  })
}
</script>

<template>
  <form @submit.prevent="submit">
    <!-- 表单控件 -->
    <button type="submit">提交</button>
  </form>
</template>

方案2：手动调用 Inertia 路由方法 #

如果没有使用 useForm，直接调用路由请求方法时同样添加 preserveScroll 配置：

import { router } from '@inertiajs/inertia-vue3'

const submit = () => {
  router.visit(route('your.submit.endpoint'), {
    method: 'post',
    data: {
      // 提交的表单数据
    },
    preserveScroll: true // 开启滚动位置保留
  })
}

补充说明 #

如果需要全局关闭所有请求后的自动滚动重置，可以在项目初始化 createInertiaApp 的配置中添加 scrollReset: false，不过更建议按需为单个请求配置 preserveScroll 避免影响其他页面交互。

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