InertiaJS配合Laravel时delete请求preserveScroll不生效如何解决？

问题原因 #

该配置失效和delete请求类型无关，是触发删除操作的<a>标签默认行为导致的：<a href="#">点击时默认会跳转到页面顶部，你没有阻止该默认行为，即使Inertia的preserveScroll配置生效，也会被a标签的默认跳转行为覆盖，最终呈现出滚动位置变更、类似页面重载的效果。

原有代码 #

控制器代码 #

public function destroy($id)
{
    Client::find($id)->delete();

    return redirect()->back()
    ->with('message', 'Article Created Successfully.');
}

Vue组件逻辑代码 #

setup(props, context) {
    const destroy = (id) =>  {
        Inertia.delete(route('clients.destroy', {id}), {
            preserveScroll: true,
        });
    }

    function edit(client) {
        context.emit('update-client', {client});
    }
    
    return {
        destroy,
        edit,
    }
}

原触发元素代码 #

<a href="#" class="text-indigo-600 hover:text-indigo-900" @click="destroy(client.id)">Delete</a>

修复方案 #

有两种可行修复方式：

方案1：将a标签替换为button标签（更推荐，语义更正确） #

修改后的触发元素代码：

<button class="text-indigo-600 hover:text-indigo-900" @click="destroy(client.id)">Delete</button>

方案2：保留a标签，阻止默认点击行为 #

给点击事件添加.prevent修饰符即可：

<a href="#" class="text-indigo-600 hover:text-indigo-900" @click.prevent="destroy(client.id)">Delete</a>

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