使用jQuery反引号语法时Laravel路由参数不生效的原因是什么？

问题原因 #

{{ route() }}是Laravel Blade的服务端语法，会在页面输出到浏览器前完成渲染，此时客户端JS的${elem.id}变量还未被解析，服务端无法识别该JS变量，因此无法正确生成路由地址。

解决方案 #

方案1（推荐：兼容后续路由配置变动） #

首先在Blade模板的<script>标签内提前定义带占位符的路由模板，让Laravel先渲染出基础路由，JS拼接DOM时替换占位符即可：

// 放在Blade页面的script标签中，由Laravel完成预渲染
const courseDetailBaseRoute = "{{ route('course.details', 'REPLACE_ID') }}";

// 拼接DOM的逻辑修改为
var tr = `<div class="course-content">
    <h3><a href="">${elem.title}</a></h3>
    <p>${elem.description}</p>
    <a class="default-btn" href="${courseDetailBaseRoute.replace('REPLACE_ID', elem.id)}">read more</a>
</div>`;    
$('#courses').append(tr);

方案2（直接拼接路径） #

如果明确路由的路径规则，比如路由定义为/course/details/{id}，可以直接在JS中拼接路径：

var tr = `<div class="course-content">
    <h3><a href="">${elem.title}</a></h3>
    <p>${elem.description}</p>
    <a class="default-btn" href="/course/details/${elem.id}">read more</a>
</div>`;    
$('#courses').append(tr);

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