Vue路由对接API时Delete功能失效：405方法不支持错误求助

我帮你排查出几个核心问题，这应该是导致405错误的关键原因：

1. Axios DELETE请求的URL不匹配路由规则 #

你的后端通过Route::resource('/products', 'ProductController')->except(['index','show'])配置了资源路由，其中destroy方法对应的URL是DELETE /api/products/{product}（必须传入产品ID），但你当前的Axios请求是：

axios.delete("/api/products/", {name, units, price, description, image})

这里的URL没有包含产品ID，后端无法匹配到对应的DELETE路由，反而会匹配到资源路由里的其他路由（比如POST /api/products是创建产品的接口），因此返回405方法不允许的错误。

2. Axios DELETE请求的参数传递方式错误 #

按照RESTful规范，DELETE请求不需要在请求体中传递资源数据，而是通过URL路径传递资源ID。另外，Axios的delete方法第二个参数是配置对象，不是请求体数据，你当前的写法会把这些参数当成配置项，完全起不到传递数据的作用。

3. 路由模型绑定的依赖未满足 #

你的destroy方法使用了路由模型绑定Product $product，这要求URL中必须传入产品ID，后端才能自动查找对应的模型实例。如果URL里没有ID，绑定会失败，路由匹配自然也会出错。

修正后的代码 #

Vue中的deleteProduct方法：

deleteProduct(product) {
  // 用产品ID拼接正确的DELETE请求URL
  axios.delete(`/api/products/${product.id}`)
    .then(response => {
      // 精准移除数组中对应的产品（之前的shift()会删除第一个元素，逻辑错误）
      this.products = this.products.filter(item => item.id !== product.id);
      // 也可以用splice实现：
      // const targetIndex = this.products.findIndex(item => item.id === product.id);
      // if (targetIndex !== -1) this.products.splice(targetIndex, 1);
    })
    .catch(error => {
      console.error('删除失败:', error.response?.data || error.message);
    });
}

额外的模板错误修正（非当前405原因，但会导致其他功能异常）

你的Vue模板里错误地在<td>标签上使用了v-model：

<td v-model="product.units">{{product.units}}</td>

v-model只能用于表单元素（如input、select等），不能直接绑定到<td>。如果要实现编辑功能，应该改成可编辑的表单控件：

<td><input type="number" v-model="product.units" class="form-control" /></td>

如果只是展示数据，直接用插值即可，不需要v-model：

<td>{{product.units}}</td>

最后验证 #

你可以再次运行php artisan route:list，确认DELETE /api/products/{product}这条路由存在，且对应的控制器方法是ProductController@destroy。修正后的请求应该能正确匹配到这条路由，解决405错误。

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