Vue3中如何为<router-link>添加自定义@click处理器，使其执行Pinia仓库函数而非默认跳转？

嗨，我完全懂你碰到的这个问题！router-link本质上是封装了导航逻辑的组件，哪怕你绑定了自定义的@click事件，它的默认跳转行为还是会触发——这就是为什么你的函数执行了，但页面还是跳走了。给你几个实用的解决办法：

方法一：阻止事件的默认行为 #

最直接的方式就是在点击事件里调用event.preventDefault()，把默认的导航行为拦下来。你可以直接在模板里写：

<router-link
  :to="{ name: 'disclaimer', params: { lang: currentLanguage } }"
  @click="(e) => { e.preventDefault(); toggleDisclaimerDialog() }"
>
  Disclaimer
</router-link>

或者把逻辑抽成组件方法，看起来更清晰：

<template>
  <router-link
    :to="{ name: 'disclaimer', params: { lang: currentLanguage } }"
    @click="handleDisclaimerClick"
  >
    Disclaimer
  </router-link>
</template>

<script setup>
import { useDisclaimerStore } from '@/stores/disclaimer';
const disclaimerStore = useDisclaimerStore();

const handleDisclaimerClick = (e) => {
  // 阻止默认导航行为
  e.preventDefault();
  // 调用Pinia仓库里的函数
  disclaimerStore.toggleDisclaimerDialog();
};
</script>

方法二：直接用普通标签代替router-link #

如果你的需求根本不需要跳转，只是触发弹窗这类操作，那其实没必要用router-link，直接用普通的<button>或者<span>标签就好，完全不会有默认跳转的困扰：

<button @click="toggleDisclaimerDialog">Disclaimer</button>

这样代码更简洁，逻辑也更明确。

为什么原来的写法不行？ #

router-link的点击事件内部已经绑定了导航逻辑，当你自己加了@click后，两个事件都会触发：先执行你的自定义函数，然后浏览器继续执行默认的导航行为。所以必须通过preventDefault()把后者拦住，才能达到只执行你想要的函数的效果。

备注：内容来源于stack exchange，提问作者delete