Laravel路由带参数或URL末尾带斜杠时jQuery无法加载问题咨询

#Laravel路由带参数/URL末尾带斜杠时jQuery加载异常解决方案

问题根因 #

• 核心错误是公共布局模板中jQuery资源使用了相对路径引入，未套用Laravel的asset()辅助函数
• 相对路径资源会根据当前页面URL的路径层级拼接请求地址：

  1. 访问不带斜杠的/bin时，浏览器基准路径为站点根目录，拼接后资源地址为/js/jquery-3.4.1.min.js，可正常访问
  2. 访问带斜杠的/bin/或带参数的/bin/xxx时，浏览器基准路径为/bin/，拼接后资源地址变为/bin/js/jquery-3.4.1.min.js，该路径不存在因此加载报错

修复方案 #

1. 打开app.blade.php找到jQuery引入代码，将原来的相对路径写法替换为带asset()的绝对路径写法：

<!-- 原错误写法 -->
<script src="js/jquery-3.4.1.min.js"></script>

<!-- 替换为 -->
<script src="{{asset('js/jquery-3.4.1.min.js')}}"></script>

2. 额外优化：
   • 头部的favicon引入也使用了相对路径<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />，建议一并修改为{{asset('img/mdb-favicon.ico')}}避免后续出现图标加载异常
   • 代码中三个空的<link href="{{asset('')}}" rel="stylesheet">属于无效代码，建议直接删除，避免产生多余的无效请求
3. 清理浏览器缓存后重新测试，所有路由场景下的jQuery均可正常加载

内容的提问来源于stack exchange，提问作者Md. Tazimul Islam Raj