Vue.js 3、vue-router、@click 事件重新加载整个页面

Question

我是 Vue 的新手，我想在移动导航上单击 menuItem 时运行功能 toggleMenu（打开/关闭菜单），但是然后整个页面重新加载，谁来阻止？ 这是我的链接：

 <router-link to="/" @click="toggleMenu">
    <div class="nav-item">Home</div>
  </router-link>

我尝试添加 @click.prevent 并阻止重新加载但不会将我发送到路径。

编辑：

所以我让它工作要感谢 Boussadjra Brahim 的回答，但我用 CompositionAPI 做到了，我使用了vue-router useRouter()钩子

模板：

 <router-link
  to="/"
  @click.prevent="toggleMenu">
  Home </router-link>

设置（）：

const router = useRouter();

function toggleMenu(){
   router.push('/'); 
}

Answer 1

添加prevent修饰符，就像你在toggleMenu所做的toggleMenu添加this.$router.push("/"); ：

 <router-link to="/" @click.prevent="toggleMenu">
    <div class="nav-item">Home</div>
  </router-link>