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

【问题标题】：Vue.js 3, vue-router, @click event reloads whole pageVue.js 3，vue-router，@click 事件重新加载整个页面
【发布时间】：2021-02-13 22:04:01
【问题描述】：

我是 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('/'); 
}

【问题讨论】：

【解决方案1】：

添加 prevent 修饰符，就像在 toggleMenu 中添加 this.$router.push("/"); 一样：

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

【讨论】：