Inertia.js如何实现表单提交后保持滚动位置并跳转至目标路由？
- 内容介绍
- 文章标签
- 相关推荐
本文共计701个文字，预计阅读时间需要3分钟。
在 inertia.%3Ca+style%3D%22color%3A 的内容中，请直接输出结果，不超过100字，无需试图解或数数。
在 Inertia.js 应用中，表单提交后的默认行为（尤其是通过 redirect() 返回）会触发一次完整的“手动访问”（manual visit），此时 Inertia 默认会重置滚动位置并更新 URL。但若未显式配置选项，容易导致两个问题：一是页面强制滚动至顶部，二是状态未按预期保留或刷新。
要精准控制这一行为，请在 Vue 组件中调用 $inertia.post() 时传入以下关键选项：
this.$inertia.post( route('chatbox.send'), { text: this.text }, { preserveState: false, // 强制刷新组件状态（避免缓存旧数据） preserveScroll: true // 提交瞬间的滚动位置将被保留，不自动跳回顶部 } )
- preserveState: false 表示不复用当前页面状态，确保后续响应（如重定向后的 /home 页面）以全新状态渲染，避免因缓存导致 UI 不一致；
- preserveScroll: true 是解决“自动滚动”的核心——它告诉 Inertia 在完成导航后，不执行默认的 window.scrollTo(0, 0)，而是维持用户当前视口位置（例如聊天框底部）。
本文共计701个文字，预计阅读时间需要3分钟。
在 inertia.%3Ca+style%3D%22color%3A 的内容中，请直接输出结果，不超过100字，无需试图解或数数。
在 Inertia.js 应用中，表单提交后的默认行为（尤其是通过 redirect() 返回）会触发一次完整的“手动访问”（manual visit），此时 Inertia 默认会重置滚动位置并更新 URL。但若未显式配置选项，容易导致两个问题：一是页面强制滚动至顶部，二是状态未按预期保留或刷新。
要精准控制这一行为，请在 Vue 组件中调用 $inertia.post() 时传入以下关键选项：
this.$inertia.post( route('chatbox.send'), { text: this.text }, { preserveState: false, // 强制刷新组件状态（避免缓存旧数据） preserveScroll: true // 提交瞬间的滚动位置将被保留，不自动跳回顶部 } )
- preserveState: false 表示不复用当前页面状态，确保后续响应（如重定向后的 /home 页面）以全新状态渲染，避免因缓存导致 UI 不一致；
- preserveScroll: true 是解决“自动滚动”的核心——它告诉 Inertia 在完成导航后，不执行默认的 window.scrollTo(0, 0)，而是维持用户当前视口位置（例如聊天框底部）。