Livewire V3注册跳转报错：Alpine.navigate is not a function

我正在尝试将Laravel Breeze改造为使用Livewire，注册完成后跳转到Dashboard页面时出现以下错误：
livewire.js?id=11c49d7e:6889 Uncaught (in promise) TypeError: Alpine.navigate is not a function
已确认页面中Alpine已正常加载，但错误依旧存在。

相关代码 #

布局文件：app.blade.php #

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        @livewireStyles
    </head>

    <body class="font-sans antialiased @auth @else text-gray-900 @endauth">
        @auth
            <div class="min-h-screen bg-gray-100">
                @include('layouts.navigation')

                <!-- Page Heading -->
                @if (isset($header))
                    <header class="bg-white shadow">
                        <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                            {{ $header }}
                        </div>
                    </header>
                @endif

                <!-- Page Content -->
                <main>
                    {{ $slot }}
                </main>
            </div>
        @else
            <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
                <div>
                    <a href="/">
                        <x-application-logo class="w-20 h-20 fill-current text-gray-500" />
                    </a>
                </div>

                <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
                    {{ $slot }}
                </div>
            </div>
        @endauth

        @livewireScripts
    </body>
</html>

路由文件：web.php #

use App\Livewire\Auth\Register;
use App\Livewire\Dashboard;

Route::middleware('guest')->prefix('breeze')->name('breeze.')->group(function () {
    Route::get('register', Register::class)->name('register');
});

Route::get('/dashboard', Dashboard::class)->middleware(['auth', 'verified'])->name('dashboard');

Livewire注册组件：Register.php #

<?php

namespace App\Livewire\Auth;

use App\Models\User;
use Livewire\Component;
use Livewire\Attributes\Rule;
use Livewire\Attributes\Layout;
use Illuminate\Support\Facades\Hash;
use Illuminate\Auth\Events\Registered;
use App\Providers\RouteServiceProvider;
use Illuminate\Support\Facades\Session;
use Illuminate\Support\Facades\RateLimiter;
use Illuminate\Validation\ValidationException;

class Register extends Component
{
    #[Rule('required|string')]
    public ?string $name = '';

    #[Rule('required|string|email')]
    public ?string $email = '';

    #[Rule('required|string|same:confirmPassword')]
    public ?string $password = '';

    #[Rule('required|string')]
    public ?string $confirmPassword = '';

    public function submit()
    {
        $this->validate();

        // TODO: Ensure rate limited with custom validation

        $user = User::create([
            'name' => $this->name,
            'email' => $this->email,
            'password' => Hash::make($this->password),
        ]);

        event(new Registered($user));

        auth()->login($user);

        return $this->redirect(RouteServiceProvider::HOME, navigate: true);
    }

    #[Layout('layouts.app')]
    public function render()
    {
        return view('livewire.auth.register');
    }
}

Livewire仪表盘组件：Dashboard.php #

<?php

namespace App\Livewire;

use Livewire\Attributes\Layout;
use Livewire\Component;

class Dashboard extends Component
{
    #[Layout('layouts.app')]
    public function render()
    {
        return view('livewire.dashboard');
    }
}

解决方案 #

1. 启用Alpine导航插件 #

Livewire 3的客户端跳转依赖Alpine.js的navigate插件，需在前端资源中引入并注册：
打开resources/js/app.js，修改Alpine初始化代码：

import Alpine from 'alpinejs';
import focus from '@alpinejs/focus';
import navigate from '@alpinejs/navigate'; // 引入导航插件

Alpine.plugin(focus);
Alpine.plugin(navigate); // 注册导航插件

window.Alpine = Alpine;
Alpine.start();

执行npm run dev重新编译资源，清除浏览器缓存后测试。

2. 改用服务器端重定向 #

如果不需要客户端无刷新跳转，可直接替换Livewire的跳转方法为Laravel原生重定向：
在Register组件的submit方法中修改：

// 原代码
return $this->redirect(RouteServiceProvider::HOME, navigate: true);
// 修改为
return redirect()->intended(RouteServiceProvider::HOME);

3. 确认脚本加载顺序 #

确保布局文件中脚本加载顺序正确，@vite需在@livewireScripts之前，保证Livewire能访问到Alpine实例：

@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles
<!-- 页面内容 -->
@livewireScripts

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