Laravel Route::resource删除操作前如何添加确认功能？

针对你遇到的问题，这里提供两种实用的实现方式，既满足Route::resource对DELETE请求的要求，又能实现删除前的确认交互：

方案1：原生JavaScript确认框（快速实现） #

这种方式无需额外UI组件，直接利用浏览器原生弹窗，代码改动最小：

修改你的删除按钮，添加onclick事件校验用户确认状态：

<form action="{{ route('category.destroy', $category->id) }}" method="POST">
    @csrf
    @method('DELETE')
    <button type="submit" class="btn btn-danger btn-block" onclick="return confirm('确定要删除该分类吗？此操作不可撤销！')">Delete</button>
</form>

用户点击"取消"时，confirm()返回false，表单不会提交；点击"确定"则触发DELETE请求完成删除。

方案2：Bootstrap模态框（优雅交互，解决ID传递问题） #

如果需要更美观的弹窗界面，可通过动态设置表单Action的方式解决ID传递问题，具体步骤如下：

1. 页面中的删除按钮（每个分类项对应） #

给按钮添加自定义data-*属性存储分类ID：

<button type="button" class="btn btn-danger btn-block delete-btn" data-id="{{ $category->id }}">Delete</button>

2. 准备Bootstrap删除确认模态框 #

模态框内放置空Action的表单，后续通过JS动态赋值：

<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        确定要删除该分类吗？删除后相关数据将无法恢复。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <form id="deleteForm" method="POST">
          @csrf
          @method('DELETE')
          <button type="submit" class="btn btn-danger">确认删除</button>
        </form>
      </div>
    </div>
  </div>
</div>

3. 编写JavaScript逻辑绑定交互 #

利用原生JS获取按钮ID，动态生成并设置表单提交地址：

// 初始化模态框实例
const deleteModal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
// 获取删除表单和所有删除按钮
const deleteForm = document.getElementById('deleteForm');
const deleteButtons = document.querySelectorAll('.delete-btn');

deleteButtons.forEach(btn => {
  btn.addEventListener('click', function() {
    // 获取当前分类ID
    const categoryId = this.getAttribute('data-id');
    // 替换路由占位符生成正确的删除URL
    const deleteUrl = "{{ route('category.destroy', ':id') }}".replace(':id', categoryId);
    // 设置表单的Action属性
    deleteForm.action = deleteUrl;
    // 显示模态框
    deleteModal.show();
  });
});

点击删除按钮时，模态框会根据当前分类ID动态设置表单提交地址，用户确认后即可发送DELETE请求完成删除。

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