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

Vue.js 3, vue-router, @click event reloads whole page

我是 Vue 的新手,我想在移动导航上单击 menuItem 我 运行 函数 toggleMenu(open/close 菜单),但随后整个页面重新加载,谁来阻止呢? 这是我的 link:

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

添加 prevent 修饰符,然后在 toggleMenu 中添加 this.$router.push("/"); :

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

LIVE DEMO