如何在Laravel Livewire中结合wire:click.prevent实现新标签页打开链接

方案一：自定义Livewire指令（推荐） #

Livewire支持自定义指令，我们可以自己实现一个带按键判断的点击指令，替代wire:click.prevent，精准控制是否阻止默认行为：

1. 注册自定义指令
   在AppServiceProvider的boot方法中添加以下代码：

use Livewire\Livewire;

public function boot()
{
    Livewire::directive('navigate-click', function ($expression) {
        return <<<JS
        onclick="event.stopPropagation(); 
        if (!event.metaKey && !event.ctrlKey) {
            event.preventDefault();
            \$wire.$expression;
        }"
        JS;
    });
}

2. 在Blade模板中使用
   替换原有的wire:click.prevent为自定义指令：

<a href="{{ route('inventory.show') }}" wire:navigate-click="$emit('navigate', {'page':'inventory.show', 'route':'{{ route('inventory.show') }}'})" class="nav-link">Link</a>

逻辑说明：点击时先阻止事件冒泡，若未按住CMD/Ctrl键，则阻止默认跳转并触发Livewire的emit；若按住按键，则允许浏览器执行默认的新标签页打开行为。

方案二：移除prevent，用原生JS配合Livewire API #

如果不想自定义指令，也可以移除wire:click.prevent，通过原生JS监听点击事件手动控制行为：

1. 修改链接代码
   去掉prevent属性，新增data-*属性存储emit参数，方便JS读取：

<a href="{{ route('inventory.show') }}" wire:click="handleNavigate" data-navigate-data='{"page":"inventory.show", "route":"{{ route('inventory.show') }}"}' class="nav-link">Link</a>

2. 在Livewire组件中添加处理方法

public function handleNavigate($event)
{
    $this->emit('navigate', json_decode($event->target->dataset['navigateData'], true));
}

3. 添加全局JS监听逻辑
   在页面的JS文件中加入以下代码：

document.addEventListener('livewire:initialized', function () {
    document.querySelectorAll('a.nav-link[data-navigate-data]').forEach(link => {
        link.addEventListener('click', function (e) {
            if (e.metaKey || e.ctrlKey) {
                // 按住CMD/Ctrl时，阻止Livewire事件执行，允许默认跳转
                e.stopImmediatePropagation();
            } else {
                // 未按住按键时，阻止默认跳转，触发Livewire方法
                e.preventDefault();
                Livewire.emit('handleNavigate', e);
            }
        });
    });
});

这里利用stopImmediatePropagation()阻止Livewire的点击事件继续执行，避免触发wire:click中的方法，同时保留浏览器默认的新标签页打开行为。

补充说明 #

• 自定义指令方案更简洁，适合全局复用；原生JS方案灵活性更强，适配特殊场景。
• 测试时需覆盖跨平台按键：Mac使用CMD键，Windows/Linux使用Ctrl键。

内容的提问来源于stack exchange，提问作者stefano di luca