Laravel 10动态布局配置：实现分类-产品-详情联动

方案一：纯 Blade + 路由实现（无 AJAX） #

这种方案无需前端异步请求，完全依赖 Laravel 的路由和视图渲染，适合对交互流畅度要求不极高的场景：

• 路由层面：定义带可选参数的路由，比如 /categories/{category?}/{product?}，或者拆分三个独立路由（分类列表、分类产品、产品详情），通过路由参数传递分类和产品 ID。
• 视图逻辑：
  • 第一列分类列表：每个分类项生成指向对应分类路由的链接，携带分类 ID 参数。
  • 第二列产品列表：默认通过 CSS 隐藏，当路由存在分类 ID 参数时，控制器查询该分类下的产品并传递到视图，同时显示第二列区域。每个产品项生成指向带产品 ID 参数的路由链接。
  • 第三列产品详情：默认展示提示文本，当路由存在产品 ID 参数时，控制器查询对应产品详情并渲染到该区域。
• 控制器处理：对应路由方法根据传入的参数（分类 ID、产品 ID），分别从数据库获取对应数据，传递给 Blade 视图完成渲染。

方案二：AJAX 异步实现（解决你遇到的问题） #

如果你需要无刷新的流畅交互，针对性解决你碰到的问题：

• 路由与请求方法：获取分类产品、产品详情这类操作属于数据查询，建议用 GET 请求而非 POST，避免「method not allowed」错误。定义对应的 GET 路由，比如 /categories/{categoryId}/products 和 /products/{productId}/detail。
• CSRF Token 处理：在主布局的 <head> 中添加 meta 标签存储 token：<meta name="csrf-token" content="{{ csrf_token() }}">，然后在 AJAX 请求的 headers 中携带这个 token（Laravel 会自动验证）。
• 动态路由参数传递：在 JS 中获取点击的分类 ID，拼接进请求 URL，比如 '/categories/' + categoryId + '/products'，或者作为 GET 参数传递（'/products?category_id=' + categoryId）。
• 指定区域刷新：控制器对应的方法不返回完整视图，而是返回局部视图的 HTML 片段（比如 return view('partials.product_list', compact('products'))->render();），JS 接收到响应后，直接用这个片段替换第二列或第三列的 DOM 内容。
• 第二列显隐控制：初始用 CSS 设置第二列隐藏，点击分类后通过 JS 修改样式显示该区域。

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