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>
我是 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>