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>