如何在Laravel Livewire SPA中用wire:navigate实现邮箱验证路由？

方法一：将路由指向Livewire组件（推荐） #

1. 生成Livewire组件
   执行命令创建负责邮箱验证通知的组件：

php artisan make:livewire Auth/VerifyEmail

2. 迁移视图内容
   把原resources/views/auth/verify-email.blade.php里的所有内容，复制到新生成的组件视图resources/views/livewire/auth/verify-email.blade.php中。

3. 修改路由定义
   替换原来的闭包路由，改为指向Livewire组件：

Route::get('/email/verify', \App\Livewire\Auth\VerifyEmail::class)->name('verification.notice');

4. 使用wire:navigate跳转
   所有指向该路由的链接，都添加wire:navigate属性，比如：

<a href="{{ route('verification.notice') }}" wire:navigate>前往邮箱验证</a>

方法二：改造原有视图（无需新建组件） #

如果不想创建新组件，只需确保原视图嵌入在Livewire布局中，并且链接使用wire:navigate：

1. 确保auth/verify-email.blade.php继承的布局包含Livewire的核心脚本和样式（即布局中有@livewireStyles、@livewireScripts）。
2. 所有跳转到verification.notice的链接添加wire:navigate属性，同时保持原路由定义不变。

进阶优化：SPA化验证邮件重发功能 #

为了完全贴合SPA体验，把“重新发送验证邮件”的操作改为Livewire组件内的方法调用，避免页面跳转：

1. 在VerifyEmail组件类中添加方法：

public function resendVerificationEmail()
{
    auth()->user()->sendEmailVerificationNotification();
    session()->flash('status', '验证邮件已重新发送至你的邮箱');
}

2. 在组件视图中替换原链接为Livewire按钮：

<button wire:click="resendVerificationEmail" class="text-blue-600">重新发送验证邮件</button>

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