Nuxt 3中nuxt-link的@click事件无法触发，求解决方案

Nuxt 3里的<nuxt-link>底层基于Vue Router的<RouterLink>，和Nuxt 2的实现逻辑不一样，所以之前的写法失效了。下面是两种可行的解决方式：

方式一：直接在@click中阻止默认行为 #

不需要再用@click.native和event=""属性，直接绑定@click并调用preventDefault()即可：

<nuxt-link :to="`/meet`" class="group font-normal" @click="(event) => event.preventDefault()">
  点击内容
</nuxt-link>

方式二：绑定自定义方法执行逻辑+阻止跳转 #

如果需要执行额外的自定义逻辑，把处理逻辑写到方法里：

<template>
  <nuxt-link :to="`/meet`" class="group font-normal" @click="handleLinkClick">
    点击内容
  </nuxt-link>
</template>

<script setup>
const handleLinkClick = (event) => {
  // 先阻止跳转行为
  event.preventDefault()
  // 这里添加你的自定义逻辑，比如弹窗提示、数据请求等
  console.log('执行自定义逻辑')
}
</script>

为什么Nuxt 2的写法在Nuxt 3里无效？ #

• Nuxt 2的<nuxt-link>是封装的组件，需要用@click.native来监听原生DOM事件；而Nuxt 3的<nuxt-link>直接代理了RouterLink的事件，原生点击事件可以直接通过@click监听，不需要.native修饰符。
• Nuxt 2里的event=""属性用来指定触发跳转的事件，这个属性在Nuxt 3中已经被移除了。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov