Just getting started with Vue and I'm trying to figure out how to toggle the menu open/close on mobile navigation without causing the whole page to reload. Any suggestions on how to prevent that?
Here's my code:
<router-link to="/ " @click="toggleMenu">
<div class="nav-item">Home</div>
</router-link>
I've tried adding @click.prevent but it only prevents the reload without navigating me to the path.
EDIT:
Thanks to Boussadjra Brahim's answer, I was able to make it work using the Composition API and the useRouter() hook from vue-router.
Template:
<router-link
to="/"
@click.prevent="toggleMenu">
Home </router-link>setup():
const router = useRouter();
function toggleMenu(){
router.push('/');
}