Laravel 10+Livewire 3中wire:navigate导致JS文件加载失败求助

第一种写法的核心错误 #

你在livewire:navigated事件的JS回调里直接嵌套<script>标签是语法错误，JavaScript不允许这种写法，浏览器根本无法解析这段代码，自然加载不了脚本。

第二种写法可能的问题 #

用data-navigate-track是Livewire官方推荐的脚本追踪方式，但大概率是这几个问题导致失效：

• 脚本路径不对：可以打开浏览器控制台的Network标签，看这些JS文件的HTTP状态码，是不是返回404
• 脚本有依赖顺序：比如script.js依赖fancybox或gsap，但Livewire导航后没按顺序执行初始化
• 第三方库需要手动重初始化：像fancybox这类库，在Livewire更新DOM后得重新绑定事件，光靠data-navigate-track做不到

正确实现方案 #

方案1：修复动态加载逻辑（修正第一种写法）

改成用JS动态创建脚本元素的方式，同时处理加载顺序和初始化：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
        <title>{{ $title ?? 'Page Title' }}</title>
    </head>
    <body>
        {{ $slot }}
    </body>
<script>
// 封装加载脚本的Promise函数，保证顺序
function loadScript(src) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = src;
        script.onload = resolve;
        script.onerror = reject;
        document.body.appendChild(script);
    });
}

document.addEventListener('livewire:navigated', async () => {
    // 按依赖顺序加载脚本
    await loadScript('/vendor/fancybox/fancybox.js');
    await loadScript('/vendor/gsap/gsap.min.js');
    await loadScript('/js/script.js');

    // 在这里手动初始化第三方库，比如fancybox：
    // Fancybox.bind("[data-fancybox]", {});
});
</script>
</html>

方案2：优化data-navigate-track用法

如果坚持用官方方案，需要做这两个调整：

1. 用Laravel的asset()函数生成绝对路径，避免路径错误：

<script src="{{ asset('vendor/fancybox/fancybox.js') }}" data-navigate-track></script>
<script src="{{ asset('vendor/gsap/gsap.min.js') }}" data-navigate-track></script> 
<script src="{{ asset('js/script.js') }}" data-navigate-track></script>

2. 在script.js里封装初始化逻辑，监听livewire:navigated事件重新执行：

// script.js 内容
function initApp() {
    // 写你的初始化逻辑，比如：
    // gsap.registerPlugin(ScrollTrigger);
    // Fancybox.bind("[data-fancybox]", {});
    // 其他自定义JS逻辑
}

// 页面首次加载执行
document.addEventListener('DOMContentLoaded', initApp);
// Livewire导航后重新执行
document.addEventListener('livewire:navigated', initApp);

额外排查步骤 #

• 打开浏览器控制台（F12），看Console标签有没有JS语法错误或资源加载报错
• 检查Network标签，确认所有JS文件的HTTP状态码是200
• 确认Livewire的核心JS已经正确加载（Laravel 10+Livewire3默认会自动注入，也可以手动加@livewireScripts指令确认）

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