Nuxt技术问题：点击NuxtLink上层按钮时如何阻止页面跳转？

这个问题我之前开发Vue/Nuxt项目时也碰到过，核心原因是事件冒泡——按钮的点击事件会向上传递到外层的NuxtLink，导致触发页面跳转。给你两个实用的解决办法，按需选择：

方法一：阻止事件冒泡（最快捷） #

直接在按钮的点击事件上添加@click.stop修饰符，它会掐断事件的向上传递路径，这样点击按钮就只会执行addToFavourites函数，不会触发页面跳转：

<NuxtLink :to="`books/1`" style="text-decoration: none;">
  <v-card hover width="400px">
    <v-card-text>
      <span> Book 1 </span>
      <!-- 添加.stop修饰符阻止事件冒泡 -->
      <v-btn icon @click.stop="addToFavourites(1)">
        <v-icon> mdi-star-outline </v-icon>
      </v-btn>
    </v-card-text>
  </v-card>
</NuxtLink>

方法二：重构DOM结构（逻辑更清晰） #

如果不想依赖事件修饰符，可以调整页面结构，让NuxtLink只包裹需要跳转的内容（比如书名），而不是整个v-card。这样按钮和跳转区域完全分离，逻辑更直观：

<v-card hover width="400px">
  <v-card-text>
    <!-- 仅给书名添加跳转链接 -->
    <NuxtLink :to="`books/1`" style="text-decoration: none;">
      <span> Book 1 </span>
    </NuxtLink>
    <!-- 按钮不在NuxtLink范围内，点击不会触发跳转 -->
    <v-btn icon @click="addToFavourites(1)">
      <v-icon> mdi-star-outline </v-icon>
    </v-btn>
  </v-card-text>
</v-card>

小提示 #

• 如果你的需求是整个卡片除了按钮都能跳转，选方法一最合适；
• 如果希望跳转区域更明确（只有书名可点跳转），方法二更符合直觉。

内容的提问来源于stack exchange，提问作者Zhe Sheng Lim