如何从JavaScript函数调用Laravel路由？代码报错Undefined variable

这个问题的核心原因其实很好理解：Blade模板是在服务器端解析执行的，而JavaScript代码是在客户端浏览器里运行的。你在route()函数里用到的$id是前端JS变量，服务器端根本识别不了它，自然会抛出"Undefined variable"的错误。

下面给你几种实用的解决办法：

方法1：生成带占位符的路由URL，用JS替换占位内容 #

Laravel的route()函数支持传入占位符的默认值，我们可以先生成一个带临时占位的URL，再在JS里把占位内容替换成实际ID：

<a onclick="confirmDelete({{ $request->task_id }})" href="#" ><span class="fa fa-trash-o"></span></a>

<script type="text/javascript">
function confirmDelete(id){
    // 先生成带占位符的路由URL，这里用0做临时占位
    let baseUrl = "{!! route('getDeleteRequest', 0) !!}";
    // 把占位的0替换成实际的id
    let targetUrl = baseUrl.replace('/0', '/' + id);
    // 增加确认提示，避免误操作
    if(confirm('确定要删除这条请求吗？')){
        document.location.href = targetUrl;
    }
}
</script>

方法2：用HTML data属性存储路由前缀，JS拼接完整URL #

把路由的基础部分存在a标签的data属性中，然后在JS里拼接ID生成完整跳转地址：

<a data-base-url="{!! route('getDeleteRequest', '') !!}" onclick="confirmDelete(this, {{ $request->task_id }})" href="#" >
    <span class="fa fa-trash-o"></span>
</a>

<script type="text/javascript">
function confirmDelete(el, id){
    if(confirm('确定要删除这条请求吗？')){
        // 拼接基础URL和ID得到完整跳转地址
        document.location.href = el.dataset.baseUrl + id;
    }
}
</script>

方法3：直接在a标签生成完整路由（推荐，最简洁） #

其实完全可以不用额外的JS函数，直接在a标签的href里生成完整路由，用confirm阻止默认跳转行为即可，彻底避开前后端变量混淆的问题：

<a href="{!! route('getDeleteRequest', $request->task_id) !!}" onclick="return confirm('确定要删除这条请求吗？')" >
    <span class="fa fa-trash-o"></span>
</a>

最后提醒一句：你的路由参数定义的是request_id，但视图里传入的是$request->task_id，要确保这两个值是业务上对应的，不然可能会出现找不到目标资源的问题哦。

内容的提问来源于stack exchange，提问作者Trọng Koy